Question

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

我的Vuex存储状态中有一个吸气剂（使用NUXT）：

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

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

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)
    }
  }
}

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

1 个答案: