Vue无法在加载时读取cookies并加载到Vuex的store中

问题描述

我在使用Vue开发一个应用的前端,想要实现同时使用vuex的store和cookies来保存用户的登录信息,我的实现方法是:用户登录后将用户信息和isLogin字段保存在vuex的store以及cookies里面,然后vue-router跳转到用户后台,(vue-router验证vuex的store中isLogin字段是否为true来判断用户的登录态);在Vue加载时(mounted)我也写了将相关cookies读取并写入store的函数,但是每次刷新后这个并没有生效,所以总是要求用户重新登录。想知道应该怎么修改?谢谢大家!

相关代码

1. main.js中Vue的初始化:
new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '<App/>',
    mounted: function () {
        if (getCookie(isLogin)) {//getCookie等函数是我自己写的,应该没有问题
            this.$store.commit('account/setuser', getCookie('user'))
        } else {
            this.$store.commit('account/logout')
        }
    }
})
2. vuex的store中有关部分
export default {
  namespaced: true,
  state: {
    user: {},
    isLogin: false
  },
  mutations: {
    login (state, user) {//登录时调用的函数
      state.user = user
      state.isLogin = true

      setCookie('user', user)
      setCookie('isLogin', true)
  },

    logout (state) {//注销时调用的函数
        state.user = {}
        state.isLogin = false

        removeCookie('user')
        setCookie('isLogin', false)
    }
  }
}
3. vue-router中有关登录态的判断
router.beforeEach((to, from, next) => {
  //判断要去的路由有没有requiresAuth
  if(to.meta.requiresAuth){//需要认证
    if(store.state.account.isLogin == true){
      next();
    }else{
      next({
        path: '/login',
        query: { redirect: to.fullPath } 
      });
    }

}else if (to.meta.requiresNoAuth) {//需要不认证
    if(store.state.account.isLogin == false){
      next();
    }else{
      next({
        path: '/'
      });
    }
}{
    next();
  }
});
阅读 2.2k
评论
    1 个回答

    问题已经解决,原因是vue-router路由验证state中登录态时,用户信息还没有写入state中,因此只要在vue-router中验证state登录态之前将cookie中的用户信息写入state即可。

      撰写回答

      登录后参与交流、获取后续更新提醒

      相似问题
      推荐文章