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

Posted 2023-03-16

【中文标题】为啥我的 Vuex getter 在客户端返回 TRUE 而在服务器端返回 FALSE？

【英文标题】：Why is my Vuex getter returning TRUE on the client side and FALSE on the server side?为什么我的 Vuex getter 在客户端返回 TRUE 而在服务器端返回 FALSE？

【发布时间】：2018-12-14 14:12:15

【问题描述】：

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

我的 Vuex 商店状态中有一个吸气剂（使用 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() 服务器端的上下文对象时，它似乎处于其初始状态。我的方法一定存在根本性的问题。

【问题讨论】：

如何将state 参数传递给isLoggedIn？

它只是 Vuex store 上的一个 getter，所以它正在消费当前的 store state 实例。

【参考方案1】：

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

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