Laravel + Vue + JWT: how to add Authorization header?

Question

Vue.js

Good afternoon!
Yesterday I decided to connect to Laravel JWT and rewrite the authorization. Prior to this, native authorization was used out of the box.
So, there are routes:

Route::get('/', ['uses' => '[email protected]']);
Route::post('/login', ['uses' => '[email protected]']);
Route::get('logout', '[email protected]');
Route::get('/ap', ['uses' => '[email protected]']);

The first renders the login form, here is the Vue code that "handles" it:

export default {
        data () {
            return {
                login: '',
                password: ''
            }
        },
        methods: {
            auth () {
                axios.post('/api/login', { login: this.login, password: this.password })
                    .then(function (response) {
                        if (response.data.success) {
                            Cookies.set('Token', 'Bearer ' + response.data.data.token);
                            axios.defaults.headers.common['Authorization'] = 'Bearer ' + response.data.data.token;
                            console.log('Токен выдан')
                        }
                        console.log(response.data.data.token);
                    })
            }
        }
    }

Those. I save JWT in cookies. Authorization passes, the cookie is saved. Now, after logging in, I want to go to mysite/ap (last route, GET method). Index method code:

try {
            if (! $user = JWTAuth::parseToken()->authenticate()) {
                return response()->json(['user_not_found'], 404);
            }
        } catch (Tymon\JWTAuth\Exceptions\TokenExpiredException $e) {
            return response()->json(['token_expired'], $e->getStatusCode());
        } catch (Tymon\JWTAuth\Exceptions\TokenInvalidException $e) {
            return response()->json(['token_invalid'], $e->getStatusCode());
        } catch (Tymon\JWTAuth\Exceptions\JWTException $e) {
            return response()->json(['token_absent'], $e->getStatusCode());
        }
        
        return response()->json(compact('user'));

However, I get a JWTException
The token could not be parsed from the request
The manuals say that I should pass an Authorization header on a request like "Authorization: Bearer + myToken". Added the following code to resources\assets\js\app.js

import VueResource from 'vue-resource';
import Cookies from 'js-cookie';
Vue.use(VueResource);
Vue.http.headers.common['Authorization'] = 'Bearer ' + Cookies.get('Token');

I rebuilt (npm run dev), but the header is not inserted and as a result - after successful authorization, I do not get access to the part of the site where I need to pass the JWT because I cannot insert the Authorization header, it is not inserted.
I installed ModHeader for Chrome, registered there a header with a token issued after authorization - everything works.
And actually the question is: how can I add an Authorization header to a GET request? What am I doing wrong? :(
Thanks in advance for your replies.

Answer 1

Use the standard passport laravel rather than third-party tymon

Answer 2

Two options:

axios({
        method: 'post', // Or GET
        url: this.$root.api.get_featured,
        headers: { 'Authorization': 'Bearer ' + this.$root.api.access_token } // Cookies.get('Token')
      })

Both options work fine for me.