厦门建网站网站建设的方案模板

厦门建网站,网站建设的方案模板,企业电子商务网站开发实训目的,广东省建设监理协会证书查询网站❤ 写在前面 如果觉得对你有帮助的话#xff0c;点个小❤❤ 吧#xff0c;你的支持是对我最大的鼓励~ 个人独立开发wx小程序#xff0c;感谢支持#xff01; #x1f3aa; 从游乐园门票说起 想象一下#xff0c;你去游乐园玩#xff0c;门票#xff08;Token#xf…❤ 写在前面如果觉得对你有帮助的话点个小❤❤ 吧你的支持是对我最大的鼓励~个人独立开发wx小程序感谢支持 从游乐园门票说起想象一下你去游乐园玩门票Token有一定有效期。传统方式中门票过期时保安拦下你“票过期了去售票处重新买”你不得不离开项目排队重新买票再回来继续玩而无感刷新就像有个贴心助手门票快过期时助手悄悄帮你续期你完全感知不到继续畅玩各个项目这就是我们今天要实现的用户体验 为什么需要Token刷新Token的生命周期┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ 登录获取 │────▶│ 使用Token │────▶│ Token过期 │ │ AccessToken │ │ 访问接口 │ │ 401错误 │ └─────────────┘ └─────────────┘ └─────────────┘ │ ┌─────────────────────┘ ▼ ┌─────────────┐ ┌─────────────┐ │ 传统方式 │────▶│ 用户需重新 │ │ 跳转登录页 │ │ 登录 │ └─────────────┘ └─────────────┘问题来了每次Token过期都让用户重新登录体验极差 无感刷新的核心思路有效已过期否是用户发起请求Token是否有效?正常请求拦截请求是否正在刷新?发起刷新请求获取新Token重试原请求加入等待队列刷新完成后重试返回数据 实战代码实现基于axios第一步基础配置// tokenManager.jsclassTokenManager{constructor(){this.accessTokenlocalStorage.getItem(access_token);this.refreshTokenlocalStorage.getItem(refresh_token);this.isRefreshingfalse;// 是否正在刷新this.requestsQueue[];// 请求等待队列}// 保存tokensetTokens(accessToken,refreshToken){this.accessTokenaccessToken;this.refreshTokenrefreshToken;localStorage.setItem(access_token,accessToken);localStorage.setItem(refresh_token,refreshToken);}// 清除tokenclearTokens(){this.accessTokennull;this.refreshTokennull;localStorage.removeItem(access_token);localStorage.removeItem(refresh_token);}}第二步axios拦截器设置// http.jsimportaxiosfromaxios;importTokenManagerfrom./tokenManager;consttokenManagernewTokenManager();consthttpaxios.create({baseURL:process.env.VUE_APP_BASE_API,timeout:10000});// 请求拦截器http.interceptors.request.use((config){if(tokenManager.accessToken){config.headers.AuthorizationBearer${tokenManager.accessToken};}returnconfig;},(error){returnPromise.reject(error);});// 响应拦截器 - 核心逻辑在这里http.interceptors.response.use((response){// 正常响应直接返回returnresponse;},async(error){constoriginalRequesterror.config;// 如果不是401错误直接返回if(error.response?.status!401||originalRequest._retry){returnPromise.reject(error);}// 标记这个请求已经重试过避免无限循环originalRequest._retrytrue;// 如果没有refreshToken跳转到登录页if(!tokenManager.refreshToken){tokenManager.clearTokens();window.location.href/login;returnPromise.reject(error);}// 如果正在刷新token将请求加入队列if(tokenManager.isRefreshing){returnnewPromise((resolve){tokenManager.requestsQueue.push((){originalRequest.headers.AuthorizationBearer${tokenManager.accessToken};resolve(http(originalRequest));});});}// 开始刷新tokentokenManager.isRefreshingtrue;try{// 调用刷新接口const{data}awaitaxios.post(/api/auth/refresh,{refresh_token:tokenManager.refreshToken});// 保存新tokentokenManager.setTokens(data.access_token,data.refresh_token);// 执行等待队列中的所有请求tokenManager.requestsQueue.forEach(callbackcallback());tokenManager.requestsQueue[];// 重试原始请求originalRequest.headers.AuthorizationBearer${data.access_token};returnhttp(originalRequest);}catch(refreshError){// 刷新失败清除token并跳转登录tokenManager.clearTokens();tokenManager.requestsQueue[];window.location.href/login;returnPromise.reject(refreshError);}finally{tokenManager.isRefreshingfalse;}});exportdefaulthttp;第三步使用示例// userService.jsimporthttpfrom./http;exportconstgetUserInfoasync(){try{constresponseawaithttp.get(/api/user/info);returnresponse.data;}catch(error){console.error(获取用户信息失败:,error);throwerror;}};exportconstupdateProfileasync(data){try{constresponseawaithttp.post(/api/user/profile,data);returnresponse.data;}catch(error){console.error(更新资料失败:,error);throwerror;}}; 增强体验添加视觉提示虽然说是无感但适当的提示能让体验更好// 在刷新token时显示加载提示letrefreshLoadingnull;// 修改响应拦截器中的刷新部分try{// 显示轻量级提示refreshLoadingshowLoading(正在更新登录状态...);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.cryptowindow.crypto.subtle){// 考虑使用加密存储localStorage.setItem(key,value);}else{// 降级方案localStorage.setItem(key,value);}},getItem:(key)localStorage.getItem(key)}; 回到游乐园比喻现在我们的系统就像这样工作游乐园项目API请求 → 检票口拦截器 │ ├── 票有效 → 直接进入 │ ├── 票过期有续票资格 → 助手悄悄续票 → 继续游玩 │ └── 票过期无续票资格 → 引导重新购票登录 性能优化小贴士// 1. 预刷新在token即将过期时提前刷新constshouldRefreshToken(){consttokenExpirygetTokenExpiry(tokenManager.accessToken);constnowDate.now();// 在过期前5分钟开始刷新returntokenExpiry-now5*60*1000;};// 2. 定时检查setInterval((){if(shouldRefreshToken()!tokenManager.isRefreshing){refreshTokenSilently();}},60000);// 每分钟检查一次// 3. 并发控制优化constMAX_QUEUE_SIZE50;if(tokenManager.requestsQueue.lengthMAX_QUEUE_SIZE){// 队列过长可能是异常情况tokenManager.requestsQueue[];window.location.reload();// 或采取其他恢复措施} 总结实现Token无感刷新的关键在于拦截401错误在axios响应拦截器中捕获避免并发刷新用标志位和队列控制优雅降级刷新失败时友好引导重新登录用户体验适当的提示但不是打断现在你的应用就像那个贴心的游乐园助手让用户在不知不觉中保持登录状态享受流畅的体验试试实现它让你的应用告别烦人的登录已过期提示吧小作业你能想到在哪些场景下即使实现了无感刷新仍然需要主动提示用户重新登录吗欢迎在评论区分享你的想法