SPA с использованием Laravel Passport и Vue pass token для компонента beforeEach

Question

Я работаю над своим новым проектом на основе Laravel и Vue. Я начинаю с входа в систему и регистрации системы в качестве основы для всей системы. Конечно, это система SPA. Я предпочитаю работать с Laravel Passport после долгих исследований о том, что именно использовать. И застрял при передаче токена каждому компоненту в заголовках Axios перед загрузкой компонента. Кроме того, я не могу понять, как я могу использовать куки в качестве держателя токена вместо localStorage.

Я следую этим трем руководствам:
1. https://www.youtube.com/watch?v=HGh0cKEVXPI
2. https://www.youtube.com/watch?v=GRhkhSzyApc
3. https://www.youtube.com/watch?v=Y9R7v15VZEA

И попытался получить помощь из других источников, но безуспешно ...

В моем файле app.js есть эта функция beforeEach, которая проверяет,У маршрута есть метаданные для requireAuth, а затем загружается компонент. Каждый компонент работает с Контроллером, который находится под промежуточным программным обеспечением аутентификации. Таким образом, каждый из них должен получить токен на предъявителя в заголовках.

router.beforeEach((to, from, next)=>{
    if (to.matched.some(rec => rec.meta.requireAuth)) {
        if (!store.getters.loggedIn) {
            next('/login');
        } else {
            next({
                token: store.getters.loggedIn
            });
        }
    } else if (to.matched.some(rec => rec.meta.visitor)) {
        if (store.getters.loggedIn) {
            next('/');
        } else {
            next();
        }
    } else {
        next();
    }
});

В моем файле store.js я создаю действие входа в систему с состоянием токена, которое в этом случае я сохраняю в локальном хранилище по какой-то причине я могуне используете VueCookies в vuex:

export const store = new Vuex.Store({
    state: {
        token: (localStorage.getItem('login')) ? localStorage.getItem('login') : null,
        user: null
    },

    getters: {
        loggedIn: state => state.token,
        user: state => state.user
    },

    mutations: {
        retrieveToken(state, token) {
            state.token = token;
        },

        retrieveUser(state, data) {
            state.user = data;
        }
    },

    actions: {
        retrieveToken(context, credentials) {
            return new Promise((resolve, reject)=>{
                axios.post('/api/login', {
                    email: credentials.email,
                    password: credentials.password
                }).then(res => {
                    if (res.status === 200 && res.data.access_token) {
                        const token = res.data.access_token;
                        localStorage.setItem('login', token);
                        setCookie('login', token, '7');
                        context.commit('retrieveToken', token);
                        resolve(res);
                    }
                }).catch(err => {
                    reject(err);
                });
            });
        },

        async retrieveUser(context) {
            axios.defaults.headers.common['Authorization'] = 'Bearer ' + context.state.token;
            await axios.get('/api/home').then(res => {
                context.commit('retrieveUser', res.data);
            })
        }
    }
});

Кто-нибудь знает, как я могу решить эти проблемы?