React路由器身份验证控制，如何处理会话结束？

Question

所以我已经阅读了一些方法来做到这一点，第一个是在路由上使用 onEnter 方法，第二个是具有更高的组件（比如这个例子https://medium.com/the-many/adding-login-and-authentication-sections-to-your-react-or-react-native-app-7767fd251bd1）

所以我这里的问题不是关于状态管理，而是关于状态更新，让我解释一下。

1. 我登录成功，我的状态已更新，并且知道我可以访问“/settings”路由。 （1'。如果我注销状态是更新并且我无法访问...）

我的问题是我应该如何正确处理会话结束？

登录状态显示我仍处于连接状态，但同时会话已过期。所以这意味着我可以访问“/设置”页面，因为尚未更新。我该怎么办 ？我看到两个选项：

1. 每次我想访问受保护的路由时，我都会向我的服务器发送一个请求，以便它会相应地更新状态。
2. 我让用户转到“/settings”，但当他尝试执行某项操作时，我会在服务器端检查会话是否仍然有效，并在会话过期时将他发送到登录页面。

我希望很清楚，您认为更好的选择是什么？我会选择选项 2。但我不是 100% 确定

感谢您的帮助

Answer 1

您的用例的简短答案：选择选项 1。

解释：假设您单击“设置”，并且可能所有设置都从商店加载。现在，显示所有这些设置很好，但是如果你想更新一些东西怎么办？您可能会进行更改甚至填写一些文本字段，只是为了获悉您的会话已超时并且您需要重新进行身份验证才能更新/保存您的设置。此外，如果用户使用共享/公共客户端并忘记注销怎么办？即使会话长时间超时，仍将显示所有设置。更糟糕的是，只需考虑有效缓存用户所做的操作/添加的信息所需的额外工作，一旦发生重新身份验证，就必须重播这些操作。

因此，为了不阻止您的用户并出于安全原因，请使用选项 1 并确保会话仍然有效，然后再呈现受保护的资源。

这可以通过多种方式完成，例如使用您的令牌发送超时值并检查客户端的值（不是很安全，因为客户端上存储的所有内容都可以在客户端上更改），发送验证请求在渲染之前使用中间件或 HoC 将您的 API 连接到您的 API，两者的组合等等。