Default axios access token not working after refresh in vue js laravel

Question

We declared default Authorization header for axion request in axios.js. it works first time but when i refresh page it gives 500 internal server error.

Here is how i declared it in axios.js

// axios
import axios from 'axios'

alert(localStorage.getItem('accessToken'))
const baseURL = ''
axios.defaults.headers.common = { 'Authorization': localStorage.getItem('accessToken') }
export default axios.create({
    baseURL
    // You can add your headers here
})

Laravel api routes

Route::group(['middleware' => 'auth:api'], function () {
    Route::group(['prefix' => 'user'], function () {
        Route::get('/all_users', 'User\UserController@index');
    });
});

Here is response

Symfony\Component\Routing\Exception\RouteNotFoundException: Route [login] not defined. in file C:\projects\logistics-portal\vendor\laravel\framework\src\Illuminate\Routing\UrlGenerator.php on line 420

Answer 1

your missing Bearer

so add this like

axios.defaults.headers.common = { 'Authorization': 'Bearer '+localStorage.getItem('accessToken') }