Question

我的Vue应用程序正在使用vue路由器和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之前加载，所以存储为空并且我的作用域未定义防护将所有请求重定向到禁止。我该如何解决这个问题？

Answer 1

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

import createPersistedState from 'vuex-persistedstate'

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

Vue路由器尚未看到存储状态

1 个答案: