如何在反应应用程序中检测过期的用户会话？

Question

我正在开发基于 Node/Express 的 REST API 和基于 React/Redux 的前端。用户可以登录（这使他们可以访问附加功能），但他们也可以在不登录的情况下使用基本功能。

当用户登录时，客户端使用凭据进行 HTTP 调用，服务器创建会话并返回用户对象（user_id 和一些其他数据）以及会话 cookie。React 应用程序将用户对象保存为 Redux 状态。在随后的 HTTP 调用中，用户通过 cookie 进行身份验证。

在渲染用户界面时，React 应用程序通过检查处于其状态的用户对象来确定它是否已登录。这用于使某些仅对登录用户可用的按钮变灰，或在用户已登录时隐藏登录链接。

问题

可能会发生会话过期或用户在不同的浏览器选项卡中注销的情况。React 应用程序无法知道这一点，并认为它仍然处于登录状态（即应用程序状态与现实不匹配），从而导致错误的 UI 显示。

用什么模式解决这个问题？

• 在所有 Ajax 调用上挂上钩子以检查 401 并更新状态？
• 在 HTTP 标头中返回会话状态（然后？）
• 服务器的彗星模式通知客户端它已注销？（那时不再是 REST API）
• 在实际 API 调用之前进行额外调用以确保用户仍处于登录状态？（好像很浪费）

一旦客户端检测到它在正在进行的操作期间不再登录，如何处理？我更愿意在一个地方处理这个问题，而不是所有函数都进行 API 调用......

我会感谢一些最佳实践！

Answer 1

作为简单轮询的替代方案，您可以通过添加一个端点来使其变得更智能，该端点让您知道在该时间点会话将发生多少秒超时。
然后在该时间之前执行 ping 操作（而不是以某个轮询速率）并进行相应更新。
在另一个选项卡中注销将返回一个无效令牌，因此也会被拾取，但如果这是您主要关心的问题，则速度不会那么快。
为此，您可以使用广播让其他选项卡立即知道（或使用sessionStorage的change事件在不支持的浏览器上模拟广播）。

否则最好的方法是实现ServiceWorker；这些可以处理您的应用程序对服务器的所有请求。它是与您的应用程序分开的一段集中代码，可以在看到其中一个请求被拒绝时向所有选项卡广播会话丢失的信息，并且您可以从这个地方有效地进行轮询（而不是在每个单独的选项卡的运行）。

Answer 2

在我能想到的 React 应用程序中，有两种直接的方法可以处理这个问题。两者都受到我几天前一位同事的启发。

1. 使用 SSE（服务器端事件）技术推送通知。正如您正确指出的那样，这会降低您的 API 的纯度。在需要完美的用户体验和/或您的服务器可能需要将其他通知推送到应用程序的情况下，这种方法应该是一个可以接受的牺牲。

2. 在您的客户端应用程序（例如：）中的某处建立一个短期计时器，该计时器setTimeout(...)定期调用将返回当前用户/会话信息的“ping”API 端点。这种方法会在超时期间影响用户体验，通常可以忽略不计，通常称为轮询。

希望这可以帮助！