如何在前端实现自动Token刷新？以下是前端实现自动Token刷新的完整技术方案，结合双Token机制与Axios拦截器

以下是前端实现自动Token刷新的完整技术方案，结合双Token机制与Axios拦截器实现无感知刷新：

一、核心实现原理

双Token机制‌

Access Token‌：短期有效（通常1-2小时），用于接口鉴权 Refresh Token‌：长期有效（通常7-30天），仅用于刷新Access Token 当Access Token过期时，使用Refresh Token获取新Token‌

拦截器控制流程‌

请求拦截器自动附加当前Token 响应拦截器捕获401状态码触发刷新流程‌ 二、前端实现步骤

Axios拦截器配置 javascript Copy Code // 请求拦截器：注入Access Token axios.interceptors.request.use(config => { const token = localStorage.getItem('access_token'); if (token) config.headers.Authorization = Bearer ${token}; return config; });

// 响应拦截器：处理Token过期 axios.interceptors.response.use( response => response, async error => { if (error.response.status === 401 && !error.config._retry) { return handleTokenRefresh(error); } return Promise.reject(error); } );

Token刷新逻辑 javascript Copy Code let isRefreshing = false; let requestQueue = [];

const handleTokenRefresh = async (error) => { const { config } = error; config._retry = true; // 标记重试请求

if (!isRefreshing) { isRefreshing = true; try { const { data } = await axios.post('/refresh', { refresh_token: localStorage.getItem('refresh_token') });

  localStorage.setItem('access_token', data.access_token);
  requestQueue.forEach(cb => cb(data.access_token));
  return axios(config); // 重试原请求
} finally {
  isRefreshing = false;
  requestQueue = [];
}

} else { return new Promise(resolve => { requestQueue.push(newToken => { config.headers.Authorization = Bearer ${newToken}; resolve(axios(config)); }); }); } };

三、安全增强方案

Refresh Token存储‌

使用HttpOnly Cookie存储防止XSS攻击‌ 服务端Redis存储校验增强安全性‌

并发请求控制‌

通过isRefreshing标记避免重复刷新请求队列管理等待中的请求‌ 四、方案对比与选型方案‌ 适用场景安全性实现复杂度原生Cookie 简单应用 ★★ ★ 双Token+拦截器企业级应用 ★★★ ★★★ 第三方认证服务快速集成场景 ★★★ ★