大家好，我是小杨，干了6年前端，和Token斗智斗勇了不知道多少回。最烦的就是用户正填着表单呢，突然跳登录页------Token过期了！今天就跟大家聊聊如何优雅处理Token过期，甚至让它自动续期，让用户无感知！
一、Token过期，用户的噩梦
想象一下：
- 用户填了半小时的报销单，点击提交------ "登录失效，请重新登录"
- 购物车选了半天，结算时------跳转登录页
血压直接拉满，用户体验直接崩盘！
常见处理方式（但不够优雅）
- 粗暴型：Token过期直接跳登录页（用户骂娘）
- 提醒型：弹窗提示"登录已过期"（用户还是得手动操作）
- 轮询检查型：定时检查Token是否快过期（浪费请求）
但今天我要讲的是更高级的玩法------无感知自动续期！
二、Token自动续期方案
1. 方案核心思路
- 短期Token（Access Token） ：用来做日常请求（比如2小时过期）
- 长期Token（Refresh Token） ：用来换新Token（比如7天过期）
流程：
- 用户登录，拿到
access_token和refresh_token access_token过期后，用refresh_token去换新的- 如果
refresh_token也过期了，才让用户重新登录
2. 前端如何实现？
（1）Axios 拦截器处理过期
javascript
// 请求拦截
axios.interceptors.request.use(config => {
const accessToken = localStorage.getItem('access_token')
if (accessToken) {
config.headers.Authorization = `Bearer ${accessToken}`
}
return config
})
// 响应拦截
axios.interceptors.response.use(
response => response,
async error => {
const originalRequest = error.config
// 如果是401（Token过期）且未重试过
if (error.response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true
try {
// 用 refresh_token 换新的 access_token
const res = await axios.post('/refresh-token', {
refresh_token: localStorage.getItem('refresh_token')
})
const { access_token, refresh_token } = res.data
localStorage.setItem('access_token', access_token)
localStorage.setItem('refresh_token', refresh_token)
// 重新发之前的请求
originalRequest.headers.Authorization = `Bearer ${access_token}`
return axios(originalRequest)
} catch (refreshError) {
// refresh_token 也过期了，跳登录页
window.location.href = '/login'
}
}
return Promise.reject(error)
}
)（2）提前续期（更丝滑）
如果等Token完全过期再换新，用户可能会遇到卡顿。更优解是在Token快过期时提前续期：
javascript
// 检查Token剩余时间
function checkTokenExpiry() {
const token = localStorage.getItem('access_token')
if (!token) return false
const payload = JSON.parse(atob(token.split('.')[1])) // 解析JWT
const expiresIn = payload.exp * 1000 - Date.now()
// 如果还剩5分钟过期，就续期
if (expiresIn < 5 * 60 * 1000) {
refreshToken()
}
}
// 定时检查（每10分钟一次）
setInterval(checkTokenExpiry, 10 * 60 * 1000)三、安全注意事项
- Refresh Token 必须HttpOnly + Secure（防止XSS盗取）
- 短期Token有效期别太长（建议2小时以内）
- 单点登录（SSO）场景要额外处理
四、实际项目踩坑记录
去年我做的一个后台系统，Token过期问题特别严重，用户经常填表到一半被踢出。
-
优化前：Token 2小时过期，直接跳登录页，用户投诉爆炸
-
优化后：
- Access Token 2小时过期
- Refresh Token 7天过期
- 提前5分钟自动续期
- 最终用户几乎感知不到Token刷新，体验大幅提升！
五、总结
Token过期处理得好，用户体验直接起飞！核心思路：
✅ 短期Token + 长期Refresh Token
✅ Axios拦截器自动换新Token
✅ 提前续期避免卡顿
✅ 安全存储Refresh Token
如果你的项目还在用"Token过期就跳登录"的粗暴方案，赶紧优化吧！
⭐ 写在最后
请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.
✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式
✅ 认为我部分代码过于老旧,可以提供新的API或最新语法
✅ 对于文章中部分内容不理解
✅ 解答我文章中一些疑问
✅ 认为某些交互,功能需要优化,发现BUG
✅ 想要添加新功能,对于整体的设计,外观有更好的建议
✅ 一起探讨技术加qq交流群：906392632
最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！
