17370845950

首先获取JWT并安全存储于localStorage，再通过封装请求函数在Authorization头中携带Bearer Token进行认证，接着可解析payload获取用户信息，最后通过登出清除或刷新机制维护令牌有效性，确保前端JWT管理的安全性与可靠性。

在现代Web应用中，JavaScript常用于处理JWT（JSON Web Token）的管理，尤其是在前端与后端进行身份认证交互时。JWT是一种开放标准（RFC 7519），用于在各方之间安全地传输信息作为JSON对象。下面介绍如何在JavaScript环境中有效管理JWT令牌。

获取与存储JWT

用户登录成功后，服务器通常会返回一个JWT。前端需要正确接收并安全存储该令牌。

• 通过fetch或axios等HTTP客户端获取登录响应中的token
• 将token保存到localStorage或sessionStorage中（注意：不推荐使用cookie除非设置HttpOnly）
• 示例代码：

  
  fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username, password })
  })
  .then(res => res.json())
  .then(data => {
    localStorage.setItem('token', data.token);
  });
      

发送JWT进行认证

每次向受保护的API发起请求时，需在请求头中携带JWT。

• 从存储中读取token
• 设置Authorization头为Bearer
• 封装请求函数以便复用：

  
  function authFetch(url, options = {}) {
    const token = localStorage.getItem('token');
    const headers = {
      'Content-Type': 'application/json',
      ...options.headers,
      'Authorization': `Bearer ${token}`
    };
    return fetch(url, { ...options, headers });
  }
      

解析与验证JWT内容

虽然不能也不应完全信任前端验证，但可以解码JWT以获取用户信息（如用户名、过期时间）。

• JWT由三部分组成：header.payload.signature，可用Base64解码payload
• 简单解码方法：

  
  function parseJwt(token) {
    const payload = token.split('.')[1];
    return JSON.parse(atob(payload));
  }
  // 使用
  const decoded = parseJwt(localStorage.getItem('token'));
  console.log(decoded.exp); // 过期时间戳
      

• 可用于判断是否即将过期，提示用户重新登录

清理与刷新令牌

用户登出或token过期时，应及时清除本地存储的token。

• 登出时删除token：

  
  function logout() {
    localStorage.removeItem('token');
    window.location.href = '/login';
  }
      

• 实现自动刷新机制（配合后端refresh token接口）
• 监听路由变化或定时检查token有效性

基本上就这些。前端管理JWT的关键在于安全地存储、正确发送、合理解析和及时清理。虽然JavaScript无法完全防止XSS攻击导致的token泄露，但结合HTTPS、短有效期、避免敏感信息存入payload等措施，可显著提升安全性。