Question

我正在基于Laravel和Vue进行新项目。我从登录和注册系统开始，作为整个系统的基础。当然，这是SPA系统。经过长时间的研究，我选择使用 Laravel Passport 。并坚持在组件加载之前将令牌传递给Axios标头中的每个组件。另外，我不明白如何使用Cookie代替本地存储作为令牌持有者。

我遵循这3条指南：
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的元数据，然后加载该组件。每个组件都与处于身份验证中间件下的Controller一起工作。因此，每个人都需要在标头中获取承载令牌。

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文件中，我创建了一个登录状态为toke的登录操作，在这种情况下，由于某种原因我无法在vuex中使用VueCookies，因此将其存储在localStorage中：

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

有人知道我该如何处理这些问题吗？

使用每个组件之前的Laravel Passport和Vue通行证的SPA

0 个答案: