检查 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模糊字符串，并且不存在与时间相关的问题。

返回一个单独的字段

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

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

或者甚至更好

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

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

通常会删除一个小的时间步长expiresAt来expiresIn避免时钟抖动和时钟漂移问题。

解析 JWT

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

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