申请一个域名可以做多少网站珠海网站建设企业

张

张建站

2026/4/11 0:33:17

10分钟阅读

申请一个域名可以做多少网站,珠海网站建设企业,物流网站购买物流单号,深圳网上注册公司的流程无感刷新 Token#xff1a;平衡安全与用户体验的认证方案问题背景当用户操作正投入时#xff0c;突然出现登录已过期#xff0c;请重新登录的提示#xff0c;这种突兀的中断会#xff1a; 破坏用户体验#xff1a;打断用户操作流程可能导致数据丢失constserviceaxios.create({baseURL:/api,timeout:10000,});// 请求拦截器service.interceptors.request.use(config{constaccessTokengetAccessTokenFromStore();if(accessToken){config.headers[Authorization]Bearer${accessToken};}returnconfig;},errorPromise.reject(error));2. 核心响应拦截器实现// api/request.jsletisRefreshingfalse;// 刷新状态标志letrequests[];// 挂起请求队列service.interceptors.response.use(responseresponse,asyncerror{const{config,response}error;// 非 401 错误直接返回if(!response||response.status!401){returnPromise.reject(error);}// 避免重复刷新如果正在刷新挂起请求if(isRefreshing){returnnewPromise(resolve{requests.push(()resolve(service(config)));});}isRefreshingtrue;try{// 调用刷新接口const{newAccessToken}awaitrefreshTokenApi();// 更新本地存储的 tokensetAccessTokenInStore(newAccessToken);// 重试原始请求config.headers[Authorization]Bearer${newAccessToken};// 执行所有挂起的请求requests.forEach(cbcb());requests[];returnservice(config);}catch(refreshError){// 刷新失败强制登出logoutUser();returnPromise.reject(refreshError);}finally{isRefreshingfalse;}});exportdefaultservice;关键优化点1. 并发请求处理// 使用队列管理并发请求if(isRefreshing){// 将请求加入队列等待刷新完成returnnewPromise(resolve{requests.push((){config.headers[Authorization]Bearer${getAccessTokenFromStore()};resolve(service(config));});});}2. 刷新令牌旋转Token Rotation// 每次刷新都生成新的 Refresh TokenconstrefreshTokenApiasync(){constresponseawaitaxios.post(/api/auth/refresh,{},{withCredentials:true// 自动发送 HttpOnly Cookie});return{newAccessToken:response.data.access_token,newRefreshToken:response.data.refresh_token// 可选的令牌旋转};};3. 防抖处理// 防止短时间内多次触发刷新letrefreshPromisenull;constrefreshTokenWithDebounceasync(){if(!refreshPromise){refreshPromiserefreshTokenApi().finally((){refreshPromisenull;});}returnrefreshPromise;};安全注意事项1. Refresh Token 存储安全必须使用 HttpOnly Cookie防止 XSS 攻击窃取设置 Secure 标志仅通过 HTTPS 传输设置 SameSite 策略防止 CSRF 攻击2. 令牌管理策略// 服务器端 Refresh Token 管理constrefreshTokenStore{// 记录有效的 Refresh TokenvalidTokens:newMap(),// 添加新令牌addToken(userId,token,deviceInfo){this.validTokens.set(token,{userId,deviceInfo,createdAt:Date.now()});},// 吊销令牌revokeToken(token){this.validTokens.delete(token);},// 吊销用户所有令牌revokeAllUserTokens(userId){for(const[token,info]ofthis.validTokens){if(info.userIduserId){this.validTokens.delete(token);}}}};3. 过期时间配置建议// 合理的过期时间配置consttokenConfig{accessToken:{expiresIn:1h,// 1小时平衡安全与刷新频率type:JWT},refreshToken:{expiresIn:7d,// 7天避免永久登录maxAge:30*24*60*60*1000// Cookie 30天}};错误处理与用户体验1. 优雅降级策略consthandleTokenRefreshasync(){try{returnawaitrefreshTokenApi();}catch(error){// 根据错误类型处理switch(error.response?.status){case403:// Refresh Token 无效需重新登录showToast(会话已过期请重新登录);redirectToLogin();break;case429:// 请求过于频繁showToast(操作过于频繁请稍后重试);break;default:// 网络或其他错误showToast(网络异常请检查连接);}throwerror;}};2. 用户体验优化// 添加加载状态提示letshowLoadingfalse;// 在刷新时显示轻微提示if(!showLoadingisRefreshing){showLoadingtrue;showSubtleNotification(正在保持连接...);}总结无感刷新 Token 机制是现代 Web 应用的必备功能它平衡安全与体验短期 Access Token 保证安全长期 Refresh Token 保证体验实现无缝认证用户无需感知认证过程提升数据安全支持令牌吊销和细粒度控制优化并发处理智能管理多请求场景通过合理的设计和实现可以在不牺牲安全性的前提下为用户提供永不掉线的流畅体验。