关键是在响应拦截器中统一处理业务错误,检查response.data.code等字段,对401等错误加重定向锁防重复跳转,并在请求拦截器中自动携带token,再封装request函数屏蔽底层细节。

用 Ajax 做错误响应的统一处理,关键不是写一堆 try/catch 或每个请求后手动判断 res.data.code,而是把逻辑收口到拦截器里——让所有请求自动走同一套校验、提示、跳转流程。
响应拦截器里识别业务错误
后端返回状态码 200 不代表成功,很多系统用 { code: 4001, msg: "用户名不存在" } 这类结构表达业务失败。这时 axios 的默认行为不会进 catch,得主动拦截:
- 在
interceptors.response.use中检查response.data.code或response.data.success === false - 匹配到错误码(如 401、403、601)时,不直接跳转,先调用统一错误提示函数(比如
Message.error(res.msg)) - 对明确需登出的错误(如
code === 401),再触发 token 清除 + 路由跳转
防重复跳转:加个重定向锁
多个请求几乎同时返回 401,若都执行 router.push('/login'),可能造成路由反复切换或白屏。稳妥做法是:
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
- 声明一个
let isRedirecting = false全局标志 - 首次遇到 401 时设为
true,并执行跳转;后续 401 暂存为 Promise,等跳转完成后再统一 reject 给业务层 - 跳转完成后重置标志,避免下次失效
请求拦截器里补全鉴权头
Token 携带不能靠每个接口手动加,否则容易漏。在请求拦截器里统一处理:
- 从
localStorage或 pinia store 读取 token - 若存在,设置
config.headers.Authorization = `Bearer ${token}` - 若为空,可直接
return Promise.reject(new Error('未登录')),阻止无效请求发出
封装 request 函数,屏蔽底层细节
业务代码不该和 axios 直接打交道。封装一层 request(),让它自动处理:
- 默认走响应拦截逻辑,但支持传
{ skipErrorHandler: true }跳过(用于登录、刷新 token 接口) - 返回值直接是
response.data,不用再写res.data.data.xxx - 错误统一抛出标准
Error实例,含code、message、response字段,方便上层 switch 处理
不复杂但容易忽略的是状态同步——比如清除 token 后,侧边栏用户信息没更新,或 loading 状态没关闭。这些要和拦截器里的动作保持一致,否则会出体验断层。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










