时间戳

首页 > 解决方案 > vuex 持久化状态不适用于 vue 路由器导航防护

vue.js - vuex 持久化状态不适用于 vue 路由器导航防护

问题描述

我已vuex-persistedstate按照文档中的定义添加。（确认和工作）

export default new Vuex.Store({
    modules: {
        auth,
    },
    plugins: [VuexPersistedState()]
});

我已经设置了一个路由器导航保护以在登录时重定向到主页

/* Auth based route handler */
router.beforeEach((to, from, next) => {
    if (to.meta.hasOwnProperty('requiresAuth')) {
        if (to.meta.requiresAuth === true) {
            let isAuthenticated = authStore.getters.isAuthenticated
            if (isAuthenticated(authStore.state) === true) {
                next()
            } else {
                next({name: 'login'})
            }
        } else {
            let isAuthenticated = authStore.getters.isAuthenticated
            console.log(authStore.state)
            if (isAuthenticated(authStore.state) === true) {
                next({name: 'home'})
            } else {
                next()
            }
        }
    } else {
        next()
    }
})

vuex 持久状态从本地存储恢复存储，但不是在导航守卫之前！

我可以提供源代码的任何必要部分进行评估。请根据需要评论您的请求。也欢迎实验性解决方案。这对我来说只是一个个人培训应用程序！

帮助表示赞赏！

标签： vue.jsvuejs2vuexvue-router

解决方案

我知道这可能对@Vaishnav 没有用，但是由于我最近没有进入同一个兔子洞，所以我想我会在这里发布一个我找到的解决方法，因为这是我发现的唯一一个专门询问这个问题的帖子.

在您的store/index.js您需要导出函数和存储对象。

改变这个：

export default() => {
  return new vuex.Store({
  namespaced: true,
  strict: debug,
    modules: {
      someMod 
    }, 
    plugins: [createPersistedState(persistedStateConfig)] 
  }); 
};

至：

const storeObj = new vuex.Store({
  namespaced: true,
  strict: debug,
  modules: {
    someMod
  },
  plugins: [createPersistedState(persistedStateConfig)]
});

const store = () => {
  return storeObj;
};

export {store, storeObj}

然后，由于您现在更改了导出商店的方式，您还需要更改导入方式。

您在应用程序中的任何地方都导入了商店，即：在main.js->import store from '@/store'中，router.js您需要更改为import {store} from '@/store'

在你的router.js正义import {storeObj} from '@/store'和使用它而不是store在你的路由器保护中，即：storeObj.getters['someMod/someValue']

推荐阅读