CODEWITHSUNDEEP
laravelvue.js
Baspa
Baspa

Reputation: 1168

Laravel 419 (Unkown Status) on request until refresh browser cache

When logging out from my application I can’t re-login because I get a 419 error. But this is only until I clear the browsers cache. After I reload the page with CTRL + F5 in Chrome (clears cache) I can login without any problems.

I have a Vue.JS frontend and a Laravel backend. They are on the same domain so I decided to put the API routes in the Web file like someone told me in this comment:

When logging out I perform an action where it makes a post request to my logout route:

export function logout() {
    return new Promise((res, rej) => {
        axios
            .post('/auth/logout')
            .then(response => {
                res(response.data);
            })
            .catch(err => {
                rej(err);
            })
    })
}

These are my routes:

Route::group(['prefix' => 'api', 'middleware' => 'auth:web'], function () {
    Route::get('memory', 'MemoryController@index');
    Route::put('memory/favorite', 'FavoriteController@update');
    Route::get('memory/{id}', 'MemoryController@show');

    Route::post('friend/add', 'FriendshipController@sendRequest');
});

Route::group(['prefix' => 'auth'], function () {
    Route::post('login', 'Auth\LoginController@login');
    Route::post('logout', 'Auth\LoginController@logout')->name('logout');

    Route::post('register', 'Auth\RegisterController@register');
});

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

And this is my LoginController:

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class LoginController extends Controller
{


    use AuthenticatesUsers {
        logout as performLogout;
    }

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

    public function logout(Request $request)
    {
        Auth::logout();
        $this->performLogout($request);
        return redirect('/');
    }

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

I guess this has someting to do with the way I have setup my Vue and Laravel becuase I am using it as an SPA and it doesn't really refresh the page? Am I right by thinking this or does it have another cause? Because this error only occurs when I log out and try to log in again without refreshing my cache. Do I miss something in my controller?

Update: Seems that I also get this 419 error some times when I click the logout button. The error looks as follows:

POST http://127.0.0.1:8000/auth/logout 419 (unknown status)

I don't think this has anything to do with not sending a CSRF token with the request because I have this piece of code in my bootstrap.js:

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');
    }

So every request should contain a CSRF header.

Upvotes: 0

Views: 1110

Answers (1)

Styx
Styx

Reputation: 10076

The problem is that you're not reloading page after logout. Your page still has stale CSRF token and after logout using it (by trying to login) will produce this error.

Also, your Auth\LoginController@logout method tries to redirect to /, but you're calling it through API request, so all it does is redirects this request to HTML page.

That should solve this issue:

public function logout(Request $request)
{
  Auth::logout();
  $this->performLogout($request);
  return response()->json(['ok'=>true]); // whatever you want
}

export function logout() {
  return axios.post('/auth/logout')
              .then(() => {
                window.location.href = '/';
              })
              .catch(console.error.bind(console));
}

Upvotes: 1

Related Questions