页面重新加载或直接访问后无法在vuex模块中访问身份验证

Question

我使用nuxt / auth模块在nuxt网络应用上进行了身份验证。我还使用模块化Vuex存储来处理不同的状态。登录后，一切都很好，我可以正常浏览该应用程序。但是，当我尝试重新加载页面或直接通过URL访问页面时，无法访问该用户，因此整个Web应用程序变得无法使用。我尝试使用this.context.rootState.auth.user访问用户对象，该对象在页面重新加载或直接访问后为null。奇怪的是，这仅发生在生产中。

我已经尝试添加一个if-guard，但是很遗憾，getter并没有反应。可能是因为它是一个嵌套对象。这是我目前的吸气剂：

 get someGetter() {
    if (!this.context.rootState.auth.user) {
      return []
    }
    const userId = this.context.rootState.auth.user.id as string
    const arr = []
    for (const item of this.items) {
        // Using userId to add something to arr
    }
    return arr
  }

是否有一种方法可以强制nuxt在初始化vuex模块之前完成身份验证，或使此getter具有反应性，因此当可访问用户对象时，它将再次触发？

这是我的auth-config在nuxt.config.ts中的样子：

auth: {
  strategies: {
    local: {
      _scheme: '@/auth/local-scheme',
      endpoints: {
        login: {
          url: '/api/authenticate',
          method: 'post',
          propertyName: false
        },
        logout: { url: '/api/logout', method: 'post' },
        user: { url: '/api/users/profile', propertyName: false }
      }
    },
    // This dummy setting is required so we can extend the default local scheme
    dummy: {
      _scheme: 'local'
    }
  },
  redirect: {
    logout: '/login'
  }
}

编辑

我按照Raihan Kabir´s answer解决了这个问题。在认证插件中使用vuex-persistedstate，该认证插件在服务器每次渲染页面时触发。该插件将userId保存在cookie中，因此，如果auth模块尚未准备好，则商店可以将其用作备用。

Answer 1

事实是，vuex会在重新加载/刷新时清除数据，以确保凭据安全。那就是vuex。如果要长时间存储数据而在重新加载后不被中断，则应使用localstorage。但是不建议使用localstorage存储凭据。

如果只需要user_id保留在[​​C0]中，请改用Cookie。并在商店的vuex文件中尝试类似的操作-

index.js