即使开发工具中的Vuex显示数据，NUXT中间件存储状态也为空

Question

我正在使用带有Auth模块的NUXT 2.0（模式=通用），对我来说，该模块已设置并正常工作！

如果使用示例代码，则在登录后查看任何页面时。我可以看到用户没问题。

<div v-if="$auth.loggedIn">
  Logged In {{ $auth.user.email}}
</div>

如果我在开发工具中查看VUEX，也可以看到state.auth.user：https://d.pr/i/3pXcLa

但是如果我添加一些中间件并加载页面，则store.state.user为空。示例简单代码。

export default function ({ store, redirect }) {
  console.log(store.state.auth)
}

我是否正确使用中间件？

真的希望有人能提供帮助。

Answer 1

每当您重新加载页面时，您的商店就会重新加载到其初始状态，因为它在客户端。

这意味着每当刷新页面时，Vuex Store中的所有数据都会丢失到其初始状态。

1解决方案可能是：

->与您的登录用户一起创建cookie，并每次在中间件中检查该cookie是否包含登录用户。

在通用模式下，中间件仅在服务器站点上可用，因此您无法访问window，这意味着您无法访问Cookie。但是还有另一种访问方法：

您破坏属性req：

export default function ({ store, redirect, req }) {
  console.log(req.headers.cookies)
  // or req.headers.cookie ? i am not sure here
}

现在您可以访问cookie。

我建议为此使用JWT。每当您成功登录时，都应该在服务器上生成JWT并将其存储在cookie中。

[每次您尝试访问某些“秘密”页面时，都会将存储在cookie中的JWT发送回服务器，以验证JWT是否仍然有效，如果是，则让用户继续前进，否则您拒绝它。