检查 cookie 中 JWT 令牌的有效性时如何避免不必要的 API 调用

Posted 2023-03-10

【中文标题】检查 cookie 中 JWT 令牌的有效性时如何避免不必要的 API 调用

【英文标题】：How to avoid unnecessary API calls when checking validity of JWT token in a cookie

【发布时间】：2019-09-14 03:13:43

【问题描述】：

我的设置如下。当用户通过我的反应前端登录时，我对服务器端进行 api 调用，在服务器端生成 JWT 令牌并在仅 HTTP 的安全 cookie 中发送回。从前端进行的任何后续 API 调用都将设置此 cookie，因此我只在处理请求之前检查该服务器端。

问题在于在前端保护我的路由。现在，我有一个高阶组件围绕着我拥有的每个组件。这个 HOC 调用 API 来检查令牌的有效性。如果令牌有效，服务器端基本上只返回 200，在这种情况下，由 HOC 包装的组件会被渲染。如果令牌无效，则返回 401，并将用户重定向到登录页面。如您所见，每次我想渲染一个组件时，我都必须调用 API 来检查令牌，这似乎非常低效。有没有解决的办法？我不想使用本地存储，因为我已经读过将 JWT 存储在那里会使 XSS 攻击成为可能。

也许我可以跟踪自上次在客户端检查令牌有效性以来的时间？这样，如果经过一定时间，我只能进行 API 调用来检查令牌，而不是每次我想渲染组件时都这样做。我不确定这有多安全。

任何帮助将不胜感激。谢谢！

【参考方案1】：

创建一个中间件，用于验证当前令牌是否已过期或何时发生错误。如果响应返回错误或令牌过期，请在中间件内发出新请求并使用新令牌更新您的 cookie。

如果你使用 axios，你可以使用interceptors 来实现。

【讨论】：

我的问题在于 API 调用本身，而不是处理我从中获得的响应。每次我进入应用程序中的不同页面时（不仅仅是第一次），我都会在渲染该页面之前进行 API 调用以检查令牌有效性，这非常昂贵，因为我正在使用 GET 访问服务器端要求其中的每一项。但是，我不知道拦截器，所以谢谢！

你在使用 Redis 吗？减少数据库检查是个好主意。

我没有在这个特定的流程中访问数据库。我最初只是创建 cookie 并将其发送回存储在用户的浏览器中，因为只有 http 是安全的。所以这个问题是客户端问题。我想我想通了。我将使用 react-idle-timer 来检测用户处于空闲状态并简单地将他注销，而不管 cookie （并在此过程中显然清除 cookie）。因此，我将使用令牌来验证 API 调用，并使用计时器来保护前端的路由。

非常好的解决方案。