前端jwt双token实现方法

<think>好的，用户想了解如何在前端通过JWT实现双Token机制。首先，我需要回忆一下JWT和双Token认证的基本原理。双Token通常指的是使用Access Token和Refresh Token的组合。Access Token用于短期授权，而Refresh Token用于获取新的Access Token，这样可以在不频繁要求用户重新登录的情况下保持安全性。 根据引用[1]，双Token认证的工作流程大致是用户登录后，服务器返回两个Token：Access和Refresh。前端用Access Token进行API请求，当Access Token过期时，用Refresh Token获取新的Access Token。如果Refresh Token也过期了，就需要重新登录。这个机制的关键在于减少Access Token的有效期，降低泄露风险，同时通过Refresh Token延长会话。 引用[2]提到JWT的结构，包括头部、载荷和签名。前端需要妥善存储这两个Token，通常Access Token存在内存或会话存储中，而Refresh Token存在更安全的地方，比如HttpOnly的Cookie中，防止XSS攻击。同时，要处理Token过期的情况，比如在请求拦截器中检查响应状态码，如果是401，则尝试用Refresh Token刷新Access Token。 可能的问题点包括如何安全存储Token、防止CSRF和XSS攻击、处理并发请求时的Token刷新等。例如，当多个请求同时发现Access Token过期，需要确保只发送一次Refresh请求，避免重复刷新。此外，需要考虑服务器的Token刷新接口的安全性，比如验证Refresh Token的有效性，并在使用后使其失效，防止重复使用。 用户可能需要具体的实现步骤，比如前端如何发起登录请求，如何处理Token的存储，如何在请求头中添加Authorization，以及如何实现自动刷新。代码示例可以帮助用户理解，比如使用axios的拦截器来处理Token刷新逻辑，同时处理并发请求的情况。 还需要注意一些最佳实践，比如设置合理的Token过期时间，使用HTTPS来加密传输，以及定期轮换Refresh Token等。可能的相关问题会涉及如何保证Token的安全性，双Token机制的优缺点，以及如何处理Token失效后的用户重定向等。 总之，我需要将这些知识点整理成一个结构清晰的回答，涵盖原理、实现步骤、代码示例以及注意事项，并生成相关问题供用户进一步学习。</think>### 前端通过 JWT 实现双 Token 机制的方案及原理 #### 一、双 Token 机制的核心原理 双 Token 机制通过分离短期有效的 **Access Token** 和长期有效的 **Refresh Token** 提升安全性： 1. **Access Token**：用于接口请求鉴权，有效期较短（如 15 分钟），降低泄露风险[^1]。 2. **Refresh Token**：用于刷新 Access Token，有效期较长（如 7 天），存储要求更严格[^1]。 #### 二、前端实现步骤 ##### 1. 登录获取双 Token ```javascript // 用户登录成功后，服务端返回双 Token { "access_token": "xxx", "expires_in": 900, // 15分钟 "refresh_token": "yyy" } ``` - **存储策略**： - Access Token → 内存或 `sessionStorage`（短期） - Refresh Token → `HttpOnly Cookie`（防 XSS）[^2] ##### 2. 请求时携带 Access Token ```javascript // 在请求头中添加 Authorization axios.interceptors.request.use(config => { const accessToken = sessionStorage.getItem('access_token'); if (accessToken) { config.headers.Authorization = `Bearer ${accessToken}`; } return config; }); ``` ##### 3. 自动刷新 Access Token ```javascript let isRefreshing = false; // 防止并发刷新 let failedQueue = []; // 存储等待刷新的请求 axios.interceptors.response.use( response => response, async error => { if (error.response.status === 401 && !error.config._retry) { if (isRefreshing) { return new Promise(resolve => { failedQueue.push(() => resolve(axios(error.config))); }); } isRefreshing = true; error.config._retry = true; try { const newAccessToken = await refreshToken(); sessionStorage.setItem('access_token', newAccessToken); error.config.headers.Authorization = `Bearer ${newAccessToken}`; failedQueue.forEach(cb => cb()); failedQueue = []; return axios(error.config); } catch (e) { // 刷新失败跳转登录页 window.location.href = '/login'; } finally { isRefreshing = false; } } return Promise.reject(error); } ); // 刷新 Token 的函数 async function refreshToken() { const res = await axios.post('/refresh_token', {}, { withCredentials: true // 自动携带 Refresh Token Cookie }); return res.data.access_token; } ``` #### 三、安全增强措施 1. **CSRF 防御**：对敏感操作增加 `CSRF Token` 校验 2. **XSS 防护**： - 避免将 Token 存在 `localStorage` - 设置 Cookie 的 `SameSite=Strict` 3. **服务端控制**： - 每次刷新后使旧 Refresh Token 失效 - 限制 Refresh Token 使用次数 #### 四、双 Token 机制优缺点 | 优势 | 劣势 | |------|------| | 减少 Access Token 泄露窗口期 | 实现复杂度较高 | | 避免频繁重新登录 | 需处理并发请求场景 | | 支持服务端主动吊销会话 | 依赖 HTTPS 保证传输安全 |