Reactjs Token到期时间

Question

我使用Reactjs登录制作单页网页。问题是如何以及在何处保存令牌过期时间。我是否需要保存在sessionStore中，但是当浏览器关闭时，所有数据都将被删除。本地商店？但是数据将永远存在。或者我可以保存在localStore中，并且在每个事件中我都要添加函数，从localStore检查到期时间，当事件触发成功再次更新localstore时？但代码看起来很糟糕......性能问题怎么样？这个approuche是否可以接受？

Answer 1

你使用Redux＆amp;＆amp; Redux thunk？

如果是这样，我采用的方法是：

1. 当用户登录时，我会在商店中保留访问权限并刷新令牌。
2. 我使用redux-persist将令牌保留在localStorage中（还有其他存储空间），以便在用户刷新/重新打开应用时保留它们。
3. 拥有中间件，在每个API请求之前检查访问令牌是否仍然有效。
   1. 如果已过期，请尝试使用刷新令牌刷新访问令牌。
   2. 如果它未过期，只需执行API请求。
4. 如果用户注销或两个令牌都已过期，那么我清除商店（以及通过redux-persist的localStorage）。

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

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

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

而不是使用商店，中间件和使用redux-persist。
1. 将令牌保留在localStore。
2. 在您的应用中创建一个层（类，函数或任何您想要的），它将充当中间件。每次要调用API时，首先调用此层，以检查令牌是否有效：
   1. 如果是这样，那么只会触发API请求。
   2. 如果令牌已过期，则该图层会在尝试刷新令牌时将所有其他API请求保留在队列中。

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