如何使用Vuex保持用户登录状态？

Question

我正在管理使用 执行登录和登录状态Vuex。这是一个标准程序：

1. 用户在表单上提交登录详细信息
2. 该表单分派一个Vuex操作，以使用凭据axios对 Node/Express 端点进行 API 调用/api/login
3. state.user如果成功，API 的响应将发回通过突变存储在对象中的用户数据setUser。标志state.user.isLoggedIn也设置为true。
4. JWT 访问令牌被发送到用户的浏览器并存储在安全 cookie 中，以便反复使用，直到过期。如果过期，则会使用刷新令牌生成新的 JWT 访问令牌。
5. 站点的标题显示用户的登录信息。例如姓名

以上一切都按预期工作。但是，如果用户刷新浏览器，则Vuex状态会被清空，并且站点标题不再显示用户信息。为了克服这个问题，我将其作为持久数据存储state.user在localStorage浏览器中，并使用页面刷新Vuex中的数据重新填充存储。localStorage如果用户注销，则被localStorage清除。

有很多路由需要检查用户是否登录。我不能依赖，localStorage因为它可以由用户操纵。如果用户删除包含 JWT 的 cookie，则该 cookielocalStorage不会被清空，并且站点标头仍会显示其登录信息。因此，我需要在几乎每个页面上执行 API 调用来检查用户是否已登录，如果没有则将其删除localStorage。

我的问题是：

1. 每次访问页面/视图时，在哪里执行登录检查？是在app安装 Vue 时还是在vue-router使用beforeEach导航卫士时发生？
2. 如果我使用beforeEachin ，每次用户更改路线vue-router时都会通过 API 调用来使网站崩溃吗？/api/login在每条路线上都这样做是正常做法吗？
3. 是否有其他替代模式来跟踪用户是否登录？

Answer 1

像这样的应用程序决策往往是主观的，因为每个应用程序都是不同的，具有不同的要求和不同的架构。听起来这是一个单页应用程序，所以我将从那里开始。

首先，您的 JWT 已建立并正在运行，这一事实非常棒 - 这可能是一项艰巨的工作，因此请为您做到了这一点感到自豪。

如果您的应用程序有某些无需先登录即可访问的页面（例如登录页面或拒绝访问页面等），那么您也必须在设计中考虑这一点。在这种情况下，beforeEach路由防护是阻止路由加载或在未登录用户尝试请求可能只会给他们带来错误的内容之前捕获这些用户的完美解决方案。

您可能不必在每次用户导航到新页面时都对服务器进行 API 调用。那可能会有点慢。由于您的应用程序使用 JWT 并配有刷新令牌，因此您应该能够依赖它们，这样如果用户已登录，他们将继续登录，直到他们关闭浏览器并离开。

这就是为什么您不应该使用 localStorage。当选项卡关闭时，甚至在重新启动后，用户仍然会显示为已登录。不要使用localStorage，而是使用sessionStorage- Helpful MDN link。

现在，检索user对象的登录事件应该只在每个浏览器选项卡上发生一次，但在访问期间保持活动状态。

我想知道为什么你不只是user在刷新浏览器时从服务器请求一个新对象。强制重新检查服务器以加载整页并不奇怪。这样做意味着您不必使用 Vuex 之外的任何内容来存储用户的状态

接下来，有没有办法在导航事件期间检查其 JWT 的有效性？根据您处理 JWT 的方式，您可能有权访问它，并且可能对其进行解码（例如通过库oidc-client-js），这样您就可以自己确定令牌是否过期。但是，如果令牌已过期，您的令牌刷新系统可能只是刷新它而不告诉您。

您还可以监视 HTTP 请求并查找 401 或 403 响应（但是您的后端处理注销的用户），如果您看到其中之一，则将用户引导回登录屏幕。您可以使用 Axios 的全局拦截器来捕获它们，或者如果您集中了调用 Axios 的位置，则可以自己进行捕获。

总体而言，您已经上路了，并且显然已经很好地掌握了这一点。到目前为止，已经取得了很大进展，大约已经完成了 90% 的繁重工作。