Token 无感刷新与 Logout：前端安全会话管理实战

为什么需要无感刷新？

你正在编辑一篇长达5000字的技术文档。突然页面弹出"登录已过期"的提示，你刚写了1小时的内容全部消失——这种体验简直是噩梦！

传统方案要么将access_token有效期设为7天要么每次操作都要求重新登录。而无感刷新则完美平衡了这两个矛盾需求：

• access_token短时效，频繁使用但不存储敏感信息
• refresh_token长时效。仅在刷新时使用且只能用一次

一次请求的完整旅程

场景：使用者点击发送消息按钮触发API请求流程如下：

// 前端发起请求
const sendMessage = async => {
try {
const response = await chatApi.post;老实说，// 成功处理
} catch {
// 自动触发刷新流程
}
};// 后端验证token
@Post
@UseGuards
async sendMessage user,@Body body) {
if throw new UnauthorizedException;其实，// token失效
return messageService.send;}

. 双重Token生成机制

主要代码解读：后端同时签发短效和长效token形成互补保护机制：

private async generateTokens {
const payload = { sub: id,name };const = await Promise.all();}

. 高并发请求队列控制精髓

关键点解析：防止多个并发请求同时触发token刷新的方案：

let isRefreshing = false;let requestsQueue =;axiosInstance.interceptors.response.use(res => res.data,async err => {
if {
if { // 第一次遇到401的情况会走到这里进行refreshToken获取更新后的token返回给调用方进行重试。return new Promise(resolve => {
requestsQueue.push => { // 其他遇到401后进来这里将当前request加入队列中等待第一个请求完成后带着最新的token重试。config.headers.Authorization = `Bearer ${newToken}`;resolve)，});
})，不过，}
config._retry = true;
isRefreshing = true;
try {
const { access_token } = await refreshAccessToken;requestsQueue.forEach);requestsQueue =;不过，return axiosInstance;// 第一次完成后其他也完成了所以直接返回。} finally {
isRefreshing = false;// 必须在finally里面置false，避免出错导致死锁。}
}
})，老实说，

. 安全注销机制设计思考点

为什么不需要调用后端注销接口？JWT本质决定了其特性:

• - JWT是无状态协议，服务器不存储任何token信息
• - Token过期完全依赖内部时间戳和签名验证
• - 前端清空本地存储即可完全注销当前会话

// 前端安全注销实现代码：
const logout = => {
localStorage.clear;// 清除所有持久化数据
sessionStorage.clear;// 清除会话数据

/* 增加一个额外步骤确保所有资源释放 */ Object.keys.forEach) window.location.href='/login';// 强制跳转断开历史状态

/* 额外建议添加 */ history.replaceState // 防止浏览器历史回退恢复会话 }

javascript

/* 高级选项 - 跨标签页同步注销 */ window.addEventListener('storage',e => { if{ logout } }) localStorage.setItem

typescript

// TypeScript版本提高型声明： type LogoutOptions={ resetApp?:boolean,clearCookies?:boolean,redirectPath?:string,}

function enhancedLogout{ options=options || {} options.redirectPath=options.redirectPath||'/login'

localStorage.clear sessionStorage.clear

if{ document.cookie.split.forEach(cookie=>{ document.cookie=${cookie.split.trim}=;expires=Thu,01 Jan... }) }

if{ window.location.reload }else{ window.location.href=options.redirectPath!} }

markdown

高级攻防思考如果攻击者截获了refresh_token怎么办？- 黑名单机制 - IP绑定 - 使用者行为分析异常检测程序

实战建议结合业务实际选择平衡策略：