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

Question

问题描述

我在使用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();
  }
});

Answer 1

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