首先获取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）
- 示例代码：
<font style="font-size:14px"> 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); }); </font>
发送JWT进行认证
每次向受保护的API发起请求时，需在请求头中携带JWT。
- 从存储中读取token
- 设置Authorization头为
Bearer <token> - 封装请求函数以便复用：
<font style="font-size:14px"> 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 }); } </font>
解析与验证JWT内容
虽然不能也不应完全信任前端验证，但可以解码JWT以获取用户信息（如用户名、过期时间）。
立即学习“Java免费学习笔记（深入）”；
- JWT由三部分组成：header.payload.signature，可用Base64解码payload
- 简单解码方法：
<font style="font-size:14px"> function parseJwt(token) { const payload = token.split('.')[1]; return JSON.parse(atob(payload)); } // 使用 const decoded = parseJwt(localStorage.getItem('token')); console.log(decoded.exp); // 过期时间戳 </font> - 可用于判断是否即将过期，提示用户重新登录
清理与刷新令牌
用户登出或token过期时，应及时清除本地存储的token。
- 登出时删除token：
<font style="font-size:14px"> function logout() { localStorage.removeItem('token'); window.location.href = '/login'; } </font> - 实现自动刷新机制（配合后端refresh token接口）
- 监听路由变化或定时检查token有效性
基本上就这些。前端管理JWT的关键在于安全地存储、正确发送、合理解析和及时清理。虽然JavaScript无法完全防止XSS攻击导致的token泄露，但结合HTTPS、短有效期、避免敏感信息存入payload等措施，可显著提升安全性。
