Vue js + Laravel: ошибка входа: запрос прерван - PullRequest
0 голосов
/ 03 ноября 2019

Я делаю СПА с логином, используя Laravel + Vue. Я делаю axios запросы к контроллерам для аутентификации / входа в систему, которые Laravel имеет по умолчанию.

Пока у меня нет модуля регистрации, поэтому я просто добавил пользователя вручную в базу данных MySQL, однако это всегдавозвращая «Запрос прерван» в веб-консоли после нажатия кнопки входа в систему, я не знаю, почему это происходит

Login.vue

    <template>
        <div class="container">
            <div class="row justify-content-center">
                <div class="page-header">
                  <h2>Vue Laravel Auth Login</h2>
                </div>
                <div class="col-md-12 text-center">
                    <p v-if="errors.length">
                        <b>Please correct the following error(s):</b>
                        <ul class="list-group">
                          <li v-for="error in errors" class="list-group-item list-group-item-danger" :key="error">{{ error }}</li>
                        </ul>
                    </p>
                </div>
                <div class="col-md-6" v-if="loginfalse = true">
                    <form @submit="checkForm" id="createAdministrator">
                      <div class="form-group">
                        <label for="email">Email address:</label>
                        <input v-model="email" type="email" class="form-control" id="email" placeholder="Enter Email" name="email">
                      </div>
                      <div class="form-group">
                        <label for="pwd">Password:</label>
                        <input v-model="password" type="password" class="form-control" id="password" placeholder="********" name="password">
                      </div>
                      <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </template>
    <script>
        export default {
            mounted() {
                console.log('Component mounted.')
            },
             data() {
                return {
                    errors: [],
                    email: '',
                    password: ''
                }
            },
            methods:{
            checkForm: function (e) {

              this.errors = [];
              if (!this.email) {
                this.errors.push('Email required.');
              }
              if (!this.password) {
                this.errors.push('Password required.');
              }

            else{

            const params = {
                email: this.email,
                password: this.password
            };

            this.email = '';
            this.password = '';

            axios.post('/vuelogin', params)
                .then(res => {
                    alert('Nota añadida con éxito');
                })



            }
            }
          }
        }
    </script>

LoginController.php


        public function vuelogin(Request $request)
        {
            if(Auth::attempt(['email' => $request->email, 'password' => $request->password])){ 
              $user = Auth::user();
              $username = $user->name;
              return response()->json([
                'status'   => 'success',
                'user' => $username,
              ]); 
            } else { 
              return response()->json([
                'status' => 'error',
                'user'   => 'Unauthorized Access'
              ]); 
            } 
        }

Маршруты (web.php)


Route::get('/{any}', 'mainpage\LandingController@index')->where('any', '.*');

Auth::routes();

Route::post('/vuelogin', 'Auth\LoginController@vuelogin');

Route::get('/home', 'HomeController@index')->name('home');

rout.js (из vueRouter)

import Home from './views/Home.vue';
import Faq from './views/Faq.vue';
import Login from './views/Login.vue';
import Register from './views/Register.vue';
import Dashboard from './views/Dashboard.vue';
import Services from './views/Services.vue'
import Example from './components/ExampleComponent.vue';
export const routes = [
    {
        path: '/',
        component: Home,
        name: 'home'
    },    
    {
        path: '/faq',
        component: Faq,
        name: 'Faq'
    },
    {
        path: '/login',
        component: Login,
        name: 'Login',
        meta:{
            auth: false
        }
    }, 
    {
        path: '/register',
        component: Register,
        name: 'Register',
        meta: {
            auth:false
        }
    },
    {
        path: '/dashboard',
        component: Dashboard,
        name: 'Dashboard',
        meta: {
            auth: true
        }
    },
    {
        path: '/services',
        component: Services,
        name: 'Services'
    }
];
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...