前端Token无感刷新：让用户像在游乐园畅玩一样流畅-编程阁

❤ 写在前面
如果觉得对你有帮助的话，点个小❤❤ 吧，你的支持是对我最大的鼓励~
个人独立开发wx小程序，感谢支持！

🎪 从游乐园门票说起

想象一下，你去游乐园玩，门票（Token）有一定有效期。传统方式中，门票过期时：

保安拦下你：“票过期了，去售票处重新买！”
你不得不离开项目，排队重新买票，再回来继续玩

而无感刷新就像有个贴心助手：

门票快过期时，助手悄悄帮你续期
你完全感知不到，继续畅玩各个项目

这就是我们今天要实现的用户体验！

🔍 为什么需要Token刷新？

Token的生命周期

┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ 登录获取 │────▶│ 使用Token │────▶│ Token过期 │ │ AccessToken │ │ 访问接口 │ │ 401错误 │ └─────────────┘ └─────────────┘ └─────────────┘ │ ┌─────────────────────┘ ▼ ┌─────────────┐ ┌─────────────┐ │ 传统方式： │────▶│ 用户需重新 │ │ 跳转登录页 │ │ 登录 │ └─────────────┘ └─────────────┘

问题来了：每次Token过期都让用户重新登录，体验极差！

🎯 无感刷新的核心思路

💻 实战代码实现（基于axios）

第一步：基础配置

// tokenManager.jsclassTokenManager{constructor(){this.accessToken=localStorage.getItem('access_token');this.refreshToken=localStorage.getItem('refresh_token');this.isRefreshing=false;// 是否正在刷新this.requestsQueue=[];// 请求等待队列}// 保存tokensetTokens(accessToken,refreshToken){this.accessToken=accessToken;this.refreshToken=refreshToken;localStorage.setItem('access_token',accessToken);localStorage.setItem('refresh_token',refreshToken);}// 清除tokenclearTokens(){this.accessToken=null;this.refreshToken=null;localStorage.removeItem('access_token');localStorage.removeItem('refresh_token');}}

第二步：axios拦截器设置

// http.jsimportaxiosfrom'axios';importTokenManagerfrom'./tokenManager';consttokenManager=newTokenManager();consthttp=axios.create({baseURL:process.env.VUE_APP_BASE_API,timeout:10000});// 请求拦截器http.interceptors.request.use((config)=>{if(tokenManager.accessToken){config.headers.Authorization=`Bearer${tokenManager.accessToken}`;}returnconfig;},(error)=>{returnPromise.reject(error);});// 响应拦截器 - 核心逻辑在这里！http.interceptors.response.use((response)=>{// 正常响应直接返回returnresponse;},async(error)=>{constoriginalRequest=error.config;// 如果不是401错误，直接返回if(error.response?.status!==401||originalRequest._retry){returnPromise.reject(error);}// 标记这个请求已经重试过，避免无限循环originalRequest._retry=true;// 如果没有refreshToken，跳转到登录页if(!tokenManager.refreshToken){tokenManager.clearTokens();window.location.href='/login';returnPromise.reject(error);}// 如果正在刷新token，将请求加入队列if(tokenManager.isRefreshing){returnnewPromise((resolve)=>{tokenManager.requestsQueue.push(()=>{originalRequest.headers.Authorization=`Bearer${tokenManager.accessToken}`;resolve(http(originalRequest));});});}// 开始刷新tokentokenManager.isRefreshing=true;try{// 调用刷新接口const{data}=awaitaxios.post('/api/auth/refresh',{refresh_token:tokenManager.refreshToken});// 保存新tokentokenManager.setTokens(data.access_token,data.refresh_token);// 执行等待队列中的所有请求tokenManager.requestsQueue.forEach(callback=>callback());tokenManager.requestsQueue=[];// 重试原始请求originalRequest.headers.Authorization=`Bearer${data.access_token}`;returnhttp(originalRequest);}catch(refreshError){// 刷新失败，清除token并跳转登录tokenManager.clearTokens();tokenManager.requestsQueue=[];window.location.href='/login';returnPromise.reject(refreshError);}finally{tokenManager.isRefreshing=false;}});exportdefaulthttp;

第三步：使用示例

// userService.jsimporthttpfrom'./http';exportconstgetUserInfo=async()=>{try{constresponse=awaithttp.get('/api/user/info');returnresponse.data;}catch(error){console.error('获取用户信息失败:',error);throwerror;}};exportconstupdateProfile=async(data)=>{try{constresponse=awaithttp.post('/api/user/profile',data);returnresponse.data;}catch(error){console.error('更新资料失败:',error);throwerror;}};

🎨 增强体验：添加视觉提示

虽然说是"无感"，但适当的提示能让体验更好：

// 在刷新token时显示加载提示letrefreshLoading=null;// 修改响应拦截器中的刷新部分try{// 显示轻量级提示refreshLoading=showLoading('正在更新登录状态...');const{data}=awaitaxios.post('/api/auth/refresh',{refresh_token:tokenManager.refreshToken});// 隐藏提示refreshLoading?.hide();showToast('登录状态已更新','success',2000);// ... 其余逻辑}catch(error){refreshLoading?.hide();showToast('登录已过期，请重新登录','error');// ... 其余错误处理}

🛡️ 安全注意事项

Refresh Token有效期：通常比Access Token长，但也不是永久的
单次使用：每次使用Refresh Token后，服务端应该颁发新的Refresh Token

安全存储：

// 使用更安全的方式存储constsecureStorage={setItem:(key,value)=>{if(window.crypto&&window.crypto.subtle){// 考虑使用加密存储localStorage.setItem(key,value);}else{// 降级方案localStorage.setItem(key,value);}},getItem:(key)=>localStorage.getItem(key)};

🎪 回到游乐园比喻

现在我们的系统就像这样工作：

游乐园项目（API请求） → 检票口（拦截器） │ ├── 票有效 → 直接进入 │ ├── 票过期，有续票资格 → 助手悄悄续票 → 继续游玩 │ └── 票过期，无续票资格 → 引导重新购票（登录）

📊 性能优化小贴士

// 1. 预刷新：在token即将过期时提前刷新constshouldRefreshToken=()=>{consttokenExpiry=getTokenExpiry(tokenManager.accessToken);constnow=Date.now();// 在过期前5分钟开始刷新returntokenExpiry-now<5*60*1000;};// 2. 定时检查setInterval(()=>{if(shouldRefreshToken()&&!tokenManager.isRefreshing){refreshTokenSilently();}},60000);// 每分钟检查一次// 3. 并发控制优化constMAX_QUEUE_SIZE=50;if(tokenManager.requestsQueue.length>MAX_QUEUE_SIZE){// 队列过长，可能是异常情况tokenManager.requestsQueue=[];window.location.reload();// 或采取其他恢复措施}