我使用 Reactjs 登录制作单页网页。问题是如何以及在哪里保存令牌过期时间。我是否需要保存在 sessionStore 中，但是当浏览器关闭时，所有数据都将被删除。本地商店？但数据将永远存在。或者我可以保存在 localStore 中，并且在每个事件中我都必须添加功能，该功能检查 localStore 的过期时间，当事件触发成功时再次更新 localstore？但是代码看起来很糟糕……那么性能问题呢？这种方法可以接受吗？
Reactjs Token 过期时间
IT技术
reactjs
login
token
singlepage
2021-04-30 02:02:49
1个回答
你使用 Redux && Redux thunk 吗？
如果是这样，这是我遵循的方法：
- 当用户登录时，我将访问和刷新令牌保留在 Store 中。
- 我正在使用redux-persist将令牌保存在 localStorage 中（也有其他存储），以便在用户刷新/重新打开应用程序时保留它们。
- 有一个中间件，在每个 API 请求之前检查访问令牌是否仍然有效。
- 如果它已过期，请尝试使用刷新令牌刷新访问令牌。
- 如果它没有过期，只需执行 API 请求。
- 如果用户注销或两个令牌都已过期，那么我会清除 Store（以及通过 redux-persist 的 localStorage）。
更多细节，对于上面的流程，你可以查看原始答案（我从哪里获得灵感）：https : //stackoverflow.com/a/36986329/4312466
如果您不使用任何状态管理库：
遵循上述想法是一种选择，但您可以：
- 将令牌保留在
localStore. - 在您的应用程序中创建一个层（类、函数或任何您想要的），它将充当中间件。每次要调用 API 时，都会先调用这一层，它会检查令牌是否有效：
- 如果是这样，只有这样才会触发 API 请求。
- 如果令牌过期，该层会将所有进一步的 API 请求保留在队列中，同时尝试刷新令牌。
但是，如果你做SPA并且有复杂的状态操作，我建议你使用一些状态管理库。