Question

在nuxtjs项目中，我创建了一个身份验证中间件来保护页面。并使用vuex-persistedstate（也尝试过vuex-persist和nuxt-vuex-persist）来持久保存vuex存储。

从页面导航到页面时，一切正常，但是当我刷新页面或直接登陆到受保护的路线时，它将我重定向到登录页面。

localStorage插件

import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
  createPersistedState({
      key: 'store-key'
  })(store)
}

身份验证中间件

export default function ({ req, store, redirect, route }) {
    const userIsLoggedIn = !!store.state.auth.user
    if (!userIsLoggedIn) {
        return redirect(`/auth/login?redirect=${route.fullPath}`)
    }
    return Promise.resolve()
}

Answer 1

我通过使用这个插件 vuex-persistedstate 而不是 vuex-persist 插件解决了这个问题。 vuex-persist 中似乎有一些错误（或者可能是设计架构）导致了它。

从本地存储还原Vuex Store之前执行的中间件

1 个答案: