第三方Cookie存储JWT Token的替代方案及过期处理咨询

核心方案：LocalStorage存储Token + Authorization头传输 #

• 存储逻辑：登录成功后，服务器返回JWT Token及过期时间戳（或客户端直接解析Token的exp字段），将Token和过期时间一同存入localStorage。
• 请求携带：每次发起API请求时，从localStorage取出Token，放在Authorization: Bearer <token>请求头中发送给服务器。

客户端过期机制实现 #

• 实时校验：每次获取Token前，先对比当前时间与存储的过期时间：
  1. 若已过期，立即删除localStorage中的Token，跳转至登录页面。
  2. 若未过期，正常携带Token发起请求。
• 后台定时检查：通过setInterval设置定时任务（比如每分钟执行一次），主动检测Token是否过期，一旦过期自动清理并触发登出逻辑。
• 解析Token获取过期时间：如果服务器未返回过期时间，客户端可直接解码JWT的Payload部分（Base64解码），取出exp字段（Unix时间戳）计算剩余有效期。

多标签页同步处理 #

• 利用storage事件实现同步：当一个标签页修改localStorage时，其他标签页会触发storage事件，通过监听该事件同步Token状态：

  window.addEventListener('storage', (e) => {
    if (e.key === 'authToken' && !e.newValue) {
      // 同步其他标签页的登出操作
      logout();
    }
  });
  

额外注意事项 #

• 服务器二次校验：即使客户端做了过期校验，服务器仍需严格验证Token的有效性（包括过期时间、签名完整性等），防止客户端篡改过期时间绕过校验。
• XSS防护：LocalStorage易受XSS攻击，需做好页面安全防护，比如对用户输入做转义、配置内容安全策略（CSP）等。

内容的提问来源于stack exchange，提问作者Adeel Aziz