首页 文章

为什么我的Vuex getter在客户端返回TRUE而在服务器端返回FALSE？

提问于
浏览 次
0

我正在使用NUXT中间件来检查用户是否登录，并相应地保护某些路由 . 问题是，当登录用户刷新其中一条受保护路由上的页面时，会话将丢失 .

我的Vuex存储状态有一个getter（使用NUXT）：

getters: {
  isLoggedIn (state) {
    return !isEmpty(state.auth.email) && !isEmpty(state.auth.token)
  }
}

我正在中间件中访问此getter以将未经身份验证的用户重定向到登录页面：

let isLoggedIn = context.store.getters.isLoggedIn
if (!isLoggedIn && protectedRoutes.includes(context.route.name)) {
    let language = context.store.language ? context.store.language : 'en'
    context.redirect(`/${language}/login`)
  }

但它不起作用 . 当我在console.log（）中获取此getter的值时，我在客户端获得TRUE，在服务器端获得FALSE . 如何让它们与Vue / Vuex保持同步？

此外，每当我在server.log（）服务器端的上下文对象时，它似乎处于其初始状态 . 我的方法肯定存在根本性的错误 .

vue.js vuejs2 vuex nuxt.js

1 回答

  • 1

    当用户刷新页面时，所有vuex状态都将丢失并从new开始 . 你需要在某个地方初始化用户nuxtServerInit

    actions: {
  nuxtServerInit ({ commit }, { req }) {
    if (req.session.user) {
      commit('user', req.session.user)
    }
  }
}
    回复于

相关问题