Vue路由器还没有看到商店状态

Posted 2023-02-23

【中文标题】Vue路由器还没有看到商店状态

【英文标题】：Vue router have not seen store state

【发布时间】：2020-01-16 17:47:27

【问题描述】：

我的 Vue 应用正在使用 vue-router 和 vuex。我从我的 API 获得了一个身份验证令牌，并将令牌推送到 localStorage 和我的商店。当页面刷新时，应用程序正在从 localStorage 加载令牌并将其推送到存储。在我的路由器中，我创建了守卫：

router.beforeEach((to, from, next) => 
    if (to.matched.some(record => record.meta.auth)) 
        if (store.getters.logged) 
            if (to.meta.scope === store.getters.scope)
                next();
                return;
            else
                next(name: 'forbidden');
                return;
            
        
        next(name: 'login');
     else 
        next();
    
);

但是由于 vue-router 在 vuex 之前加载，所以防护无法正常工作，因此存储为空且我的范围未定义防护将所有请求重定向到禁止。我该如何解决这个问题？

【参考方案1】：

看起来这个问题是在从 localStorage 保存\检索存储的实现中。我建议你不要重新发明***，而是使用这个包来解决你的问题：https://www.npmjs.com/package/vuex-persistedstate

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store(
  // ...
  plugins: [createPersistedState()]
)