Reactjs Token 过期时间

Posted 2023-03-10

【中文标题】Reactjs Token 过期时间

【英文标题】：Reactjs Token expiration time

【发布时间】：2018-11-06 19:05:38

【问题描述】：

我用 Reactjs 登录制作单页网页。问题是如何以及在哪里保存令牌过期时间。我是否需要保存在 sessionStore 中，但是当浏览器关闭时，所有数据都会被删除。本地商店？但随后数据将永远存在。或者我可以保存在 localStore 中，并且在每个事件中我必须添加功能，检查 localStore 的过期时间，当事件触发成功时再次更新 localstore？但是代码看起来很糟糕……性能问题呢？这种方法可以接受吗？

【问题讨论】：

您只需要在主组件的componentDidMount()中设置一个间隔来不时调用刷新函数

是的，方法是可以接受的并且可以很好地实施。您也可以考虑使用 cookie。但是不要让代码看起来很糟糕：P，创建一个不同的文件来执行所有会话活动/功能。

【参考方案1】：

你使用 Redux && Redux thunk 吗？

如果是这样，这是我遵循的方法：

当用户登录时，我将访问和刷新令牌保留在商店中。 我使用 redux-persist 将令牌保存在 localStorage（还有其他存储）中，以便在用户刷新/重新打开应用程序时持久保存它们。 有一个中间件，在每个 API 请求之前检查访问令牌是否仍然有效。
如果已过期，请尝试使用刷新令牌刷新访问令牌。 如果没有过期，只需执行 API 请求即可。
如果用户注销或两个令牌都已过期，那么我会清除 Store（也通过 redux-persist 清除 localStorage）。

更多细节，对于上述流程，您可以查看原始答案（我的灵感来自哪里）：https://***.com/a/36986329/4312466

如果您不使用任何状态管理库：

遵循上述想法是一种选择，但您可以：

将令牌保存在localStore。 在您的应用程序中创建一个层（类、函数或任何您想要的），它将充当中间件。每次要调用 API 时，都会先调用该层，这将检查令牌是否有效：
如果是这样，只有这样才会触发 API 请求。 如果令牌过期，该层将在尝试刷新令牌时将所有进一步的 API 请求保留在队列中。

---

但是，如果你做SPA并且有复杂的状态操作，我建议你使用一些状态管理库。