41 lines
1.9 KiB
Markdown
41 lines
1.9 KiB
Markdown
|
# 变更：前端 HTTP 拦截器自动刷新 refreshToken 功能
|
|||
|
|
|
|||
|
|
## 为什么
|
|||
|
|
当前系统的 token 过期处理机制存在缺陷：
|
|||
|
|
1. 只在收到 401 错误后才尝试刷新 token
|
|||
|
|
2. 导致用户看到错误提示后才发现 token 已过期
|
|||
|
|
3. 影响用户体验，特别是长时间操作时
|
|||
|
|
|
|||
|
|
需要实现在请求前主动检查并刷新即将过期的 token，提升用户体验。
|
|||
|
|
|
|||
|
|
## 什么发生变化
|
|||
|
|
在 `frontend/api/axios/client.js` 的请求拦截器中添加智能 token 刷新机制：
|
|||
|
|
|
|||
|
|
### 新增功能
|
|||
|
|
1. **预检查机制**：在每次需要认证的请求前，检查 token 是否即将过期（默认 5 分钟缓冲时间）
|
|||
|
|
2. **自动刷新**：如果 token 即将过期，自动使用 refreshToken 获取新 token
|
|||
|
|
3. **并发控制**：防止多个请求同时触发 token 刷新
|
|||
|
|
4. **无缝体验**：用户无需感知 token 刷新过程，请求正常进行
|
|||
|
|
|
|||
|
|
### 影响的文件
|
|||
|
|
- `frontend/api/axios/client.js` - 核心拦截器逻辑
|
|||
|
|
- `frontend/api/http.js` - 可能需要更新调用方式
|
|||
|
|
- `frontend/utils/token-manager.js` - 使用现有的 `isExpired()` 方法
|
|||
|
|
|
|||
|
|
### 关键设计决策
|
|||
|
|
1. **缓冲时间**：使用 5 分钟作为 token 刷新缓冲时间（可配置）
|
|||
|
|
2. **白名单**：刷新 token 接口 `/auth/refresh-token` 不需要 token，直接跳过检查
|
|||
|
|
3. **错误处理**：刷新失败时清理 token 并跳转登录页
|
|||
|
|
4. **状态管理**：使用 Promise 锁机制防止并发刷新
|
|||
|
|
|
|||
|
|
## 影响
|
|||
|
|
- **用户体验**：显著提升 - 消除因 token 过期导致的请求失败
|
|||
|
|
- **系统稳定性**：提高 - 减少 401 错误发生频率
|
|||
|
|
- **安全性**：保持 - 继续使用 refreshToken 机制，安全性不变
|
|||
|
|
- **性能影响**：极小 - 仅在 token 即将过期时触发一次刷新请求
|
|||
|
|
|
|||
|
|
## 兼容性
|
|||
|
|
- 向后兼容：不影响现有认证流程
|
|||
|
|
- API 兼容：不改变后端接口契约
|
|||
|
|
- 配置兼容：可配置缓冲时间，默认 5 分钟
|