如果存储在本地存储中，检查 jwt 令牌过期状态的最佳方法

Question

我想在客户端检查令牌是否过期。

我的令牌存储在本地存储中。

现在我要做的是：调用服务器以检查它是否有效，但我只在路径为：https:exp.com/

代码：

  useEffect(() => {
    verifyToken(auth.token).then((res) => {
      if (res.status !== 'success' && res.message === 'Token expired') {
        signoutClient(() => {
          router.push('/auth/login');
        });
      }
    });
  }, [auth.token, router]);

现在的问题是，如果用户直接转到另一个 url exp 怎么办：https:exp.com/helloworld

我正在考虑使用套接字，但我不知道它是否可以工作。

想法是：客户端保持监听状态，只要令牌过期，服务器就会发出一条消息。

知道我该怎么做吗？

Answer 1

有不同的技术。

请注意，在两台不同的机器上处理时间（在这种情况下是过期）可能会由于时间抖动或时钟错位而导致问题，因此不是那么简单

被动过期

我最喜欢的模式是出现专用服务器错误。

您的服务器应在令牌过期时响应特定错误（由于角色访问权限而与401 Unauthorized 区分开来）。然后向客户端添加一个 HTTP 中间件：

• 检测到此错误响应
• 删除本地令牌并导航到/auth/login

或者如果你有renew token:

• 检测到此错误响应
• 尝试续订JWT
• 成功时重复原始请求或失败时导航到身份验证页面。

这是一个被动系统，允许您将JWT 视为一个晦涩的字符串，并且不存在与时间相关的问题。

返回一个单独的字段

如果出于安全原因，您希望在会话到期时隐藏敏感信息，即使用户没有与用户界面交互（如银行网站那样），您需要知道何时令牌将过期。一种常见的技术是将过期时间与令牌一起返回（在身份验证响应中）。

{
   "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.JFDV4mOKKh0sMfkBKvsbvm8iWjHEGBXtPvC49ob3qiI",
   "expiresAt": 1234567890
}

甚至更好

{
   "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.JFDV4mOKKh0sMfkBKvsbvm8iWjHEGBXtPvC49ob3qiI",
   "expiresIn": 600
}

第一个返回令牌到期相对于 服务器时间 的 UNIX 时间。这会受到时间抖动或时钟失调的影响（这可能会导致错误）。第二个更好，因为它让 UI 知道令牌将在多少秒内（因为收到响应）过期，然后可以用来根据本地时钟计算 UNIX 时间。

通常会从expiresAt 和expiresIn 中删除一个小时间步，以避免时钟抖动和时钟漂移问题。

解析 JWT

如果没有其他解决方案，可以随时解析JWT：

const JWT = `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjEyMzQ1Njc4OTAsIm5hbWUiOiJKb2huIERvZSIsImlhdCI6MTUxNjIzOTAyMn0.1c_yQjnMZfKUb4UTDE_WvbC71f8xxtyMsdqKKkI1hF8`;

const jwtPayload = JSON.parse(window.atob(JWT.split('.')[1]))
console.log(jwtPayload.exp);

Answer 2

您可以使用 lib（如 jwt_decode）来解码您的 JWT 令牌，其中很可能包含您可以检查的过期时间戳（将其与当前时间戳进行比较）以及是否超过（过期）只需从本地存储中删除它并将用户重定向到登录页面。

但是您还必须考虑为调用您的 API 以检查任何 401 响应状态代码的函数添加一个 catch 块也执行相同操作（如果令牌有效，那么当用户四处走动时）它的有效期结束）