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

dojqjjoe 于 2023-01-19 发布在 Java

关注(0)|答案(2)|浏览(106)

我的Vue应用程序使用vue-router和vuex。我从API获得授权令牌，并将令牌推送到localStorage和我的商店。当页面刷新时，应用程序从localStorage加载令牌并将其推送到商店。在我的路由器中，我创建了guard：

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之前加载的，所以保护没有正常工作，所以存储是空的，我的作用域是未定义的保护将所有请求重定向到禁止。

JavaScript

来源：https://stackoverflow.com/questions/57947537/vue-router-have-not-seen-store-state

2条答案

按热度按时间

q7solyqu1#

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

import createPersistedState from 'vuex-persistedstate'

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

赞(0）回复(0）举报 2023-01-19

xpcnnkqh2#

您应该尝试导入存储在路由器之前，如

import Vue from 'vue';
import router from './router';
import store from './store';
import App from './App.vue';
new Vue({ 
    store,
    router,
    render: (h) => h(App)
}).$mount('#app');

赞(0）回复(0）举报 2023-01-19

我来回答

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

2条答案

相关问题

热门标签

最新问答