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

Question

我正在使用 NUXT 中间件来检查用户是否登录，并相应地保护某些路由。问题是，当登录用户刷新 protected 路由之一上的页面时， session 就会丢失。

我的 Vuex 存储状态有一个 setter/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 保持同步？

此外，每当我在服务器端console.log()上下文对象时，它似乎都处于初始状态。我的方法一定有根本性的错误。

Answer 1

当用户刷新页面时，所有 vuex 状态都会丢失并从新开始。您需要在类似 nuxtServerInit 的地方初始化用户

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