响应拦截器统一处理凭证过期:通过状态码+响应体双重校验识别401/403或自定义code,配合JSON解析、标志位防重复、AbortController中止并发请求,并与请求拦截器协同失效token。

在响应拦截器中统一处理过期凭证,核心是:捕获后端返回的特定业务错误码(如 401、403 或自定义 code: 1001 / "token_expired"),触发登出、清缓存、跳转登录页等标准化动作,且避免重复执行。
识别凭证过期的响应特征
不能只依赖 HTTP 状态码,需结合协议约定。常见判断方式包括:
-
状态码 + 响应体内容双重校验:比如
response.status === 401且data.code === 1001或data.msg?.includes('expired') -
统一错误结构优先:后端返回标准格式
{ code: number, msg: string, data: any },拦截器中解析 JSON 后检查code === 401 || code === 403 -
忽略非 JSON 响应:若
response.headers.get('content-type')?.includes('json')不成立,不尝试解析,直接按网络/连接错误处理
在封装的 fetch 中注入响应拦截逻辑
不修改原生 fetch,而是在你自己的请求函数(如 request())里,在 await fetch() 之后、response.json() 之前或之后插入判断:
- 先调用
response.clone().json()获取数据(避免消耗原始 body) - 若解析成功且判定为凭证过期,立即调用清理函数:
clearAuthStorage()、redirectToLogin() - 然后 抛出自定义错误(如
throw new AuthExpiredError()),确保上层.catch()或try/catch能捕获,但不继续走正常业务流程
防止重复处理与竞态问题
多个并发请求同时收到 401 时,只应执行一次登出逻辑:
立即学习“Java免费学习笔记(深入)”;
- 用一个布尔标志
isLoggingOut = false控制,首次进入时设为true,后续请求跳过登出动作 - 登出完成后重置标志,并可触发全局事件(如
dispatchEvent(new CustomEvent('auth-expired')))通知其他模块 - 对正在 pending 的请求,可配合
AbortController主动中止,避免无意义等待
与请求拦截器协同工作
凭证过期处理不是孤立的。响应拦截器触发登出后,请求拦截器应同步失效:
- 请求拦截器中不再自动注入 token(例如跳过
config.headers.Authorization = getToken()) - 可监听登出事件,在拦截器内清除 token 缓存,或让
getToken()返回null,使后续请求自然失败并提示用户登录


















