How to login/logout using full stack Vue frontend with Laravel backend - vuejs2

Question

I have been struggling night after night trying to implement a complete Vue front-end using a Laravel back-end on the same server. I can get normal resource requests done with axios just fine; however, loggin in and out is a bit of a nightmare! I have exhausted my ideas and really need some help :)
Here is my Login Vue component:
<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>
Here is my axios config in my 'bootstrap' file which I pull into my 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');
}
Here is my 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)
});
Now on the back-end side, I have pulled in my 'authenticated' and 'loggedOut' methods into my Login controller and return some 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);
}
}
The problem I am getting when I try to login is the following 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".
I get that response only some o the time, the rest of the time I get my only view returned as the response from the axios call.
Here are my Laravel web routes:
// 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', '.*');
And here is my Vue router:
{ path: '/login', component: LoginPage },
{ path: '/register', component: RegisterPage },

Answer 1

First add in your form
then submit button to submit and call login method in vuejs method section.In my case
Login
In vuejs component method i put
document.getElementById("login_form").submit();
If you are using Laravel 6, then there will be Auth::routes() in web.php under routes.php. Login and logout request from your will be handled trhough Auth::routes(). There is no need to add routes to vuejs router and handling these requests in api.php.The logout method is called in same way.