Как войти / выйти, используя полный стек Vue с Laravel Backend

Question

Я боролся ночь за ночью, пытаясь реализовать полный интерфейс Vue, используя сервер Laravel на том же сервере.Я могу нормально получать запросы ресурсов с помощью axios;однако вход в систему и выход из нее - настоящий кошмар!Я исчерпал свои идеи и действительно нуждаюсь в помощи:)

Вот мой компонент Login Vue:

  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card">
          <div class="card-header">Login</div>

            <div class="card-body">
              <form>

                <div class="form-group row">
                  <label for="email" class="col-md-4 col-form-label text-md-right">E-Mail Address</label>

                  <div class="col-md-6">
                    <input id="email" type="email" class="form-control" name="email" required autocomplete="email" autofocus v-model="email">

                      <!-- <span class="invalid-feedback" role="alert">
                        <strong>message</strong>
                      </span> -->

                  </div>
                </div>

                <div class="form-group row">
                  <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>

                  <div class="col-md-6">
                    <input id="password" type="password" class="form-control" name="password" required autocomplete="current-password" v-model="password">

                        <!-- <span class="invalid-feedback" role="alert">
                          <strong>message</strong>
                        </span> -->

                  </div>
                </div>

                <div class="form-group row">
                  <div class="col-md-6 offset-md-4">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" name="remember" id="remember" v-model="remember">

                      <label class="form-check-label" for="remember">
                        Remember Me
                      </label>
                    </div>
                  </div>
                </div>

                <div class="form-group row mb-0">
                  <div class="col-md-8 offset-md-4">
                    <button @click.prevent="login" class="btn btn-primary">
                      Login
                    </button>

                      <a class="btn btn-link" href="">
                        Forgot Your Password?
                      </a>

                  </div>
                </div>
              </form>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  data() {
    return {
      email: null,
      password: null,
      remember: null,
      loading: false
    }
  },

  methods: {

    login() {
      window.axios.post('login', {
        email: this.email, password: this.password
      })
        .then(response => {
          console.log('Login fired!')
          console.log(response.data)
        })
        .catch(error => {
          console.log(error)
        })
    },

  },
}
</script>

Вот мой конфигурационный файл axios в моем файле начальной загрузки, который я загружаю в свойapp.js:

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.baseURL = 'http://localhost:8000/api/';


let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

Вот мой app.js:

import './bootstrap'
import Vue from 'vue'
import VueRouter from 'vue-router'
import store from './store/store'
import routes from './routes'
import App from './App.vue'


Vue.use(VueRouter);

const router = new VueRouter({
    mode: 'history',
    routes
})


const app = new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App)
});

Теперь на бэкэнд-стороне я использовал свои методы authenticated и loggedOutв мой контроллер входа в систему и верните несколько json:

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;

class LoginController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Login Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles authenticating users for the application and
    | redirecting them to your home screen. The controller uses a trait
    | to conveniently provide its functionality to your applications.
    |
    */

    use AuthenticatesUsers;

    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = '/home';

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }

    /**
     * The user has been authenticated.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  mixed  $user
     * @return mixed
     */
    protected function authenticated(Request $request, $user)
    {
        return response()->json('You have successfully logged in', 200);
    }

    /**
     * The user has logged out of the application.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return mixed
     */
    protected function loggedOut(Request $request)
    {
        return response()->json('You have logged out now.', 200);
    }
}

Проблема, с которой я сталкиваюсь при попытке войти в систему, заключается в следующем файле console.log:

dispatchXhrRequest @ app.js:279
xhrAdapter @ app.js:118
dispatchRequest @ app.js:726
Promise.then (async)
request @ app.js:528
Axios.<computed> @ app.js:553
wrap @ app.js:1071
logout @ app.js:2057
invokeWithErrorHandling @ app.js:42933
invoker @ app.js:43258
original._wrapper @ app.js:48611
app.js:2060 Error: Request failed with status code 500
    at createError (app.js:653)
    at settle (app.js:899)
    at XMLHttpRequest.handleLoad (app.js:166)
app.js:279 XHR failed loading: POST "http://localhost:8000/api/logout".

Я получаю этот ответ только несколькоo время, в остальное время я получаю свой единственный вид в ответ на вызов axios.

Вот мои веб-маршруты Laravel:

// Authentication Routes...
Route::post('api/login', 'Auth\LoginController@login');
Route::post('api/logout', 'Auth\LoginController@logout')->name('logout');

// Registration Routes...
Route::post('register', 'Auth\RegisterController@register');


Route::get('{any?}', function () {
    return view('index');
// });
// })->where('any', '^(?!api).*$');
})->where('any', '.*');

А вот мое Vueмаршрутизатор:

    { path: '/login', component: LoginPage },
    { path: '/register', component: RegisterPage },