接口返回 200，但 code ≠ 0
Token 过期要跳登录
没权限要提示
网络异常还要兜底

如果这些判断写在每个页面里，项目一定会失控。

我一开始也是这样写的：

if (res.code === 401) {  router.push('/login')} else if (res.code !== 0) {  ElMessage.error(res.msg)}

结果是：
每个页面一套判断，维护成本极高。

一、这不是业务问题，是工程问题

后来我意识到一个事实：

接口异常的处理逻辑，不应该属于任何一个页面。

它是：

• 全局性的
• 规则统一的
• 必须可控的

所以最终方案只有一个：
统一在 Axios 层解决

二、我的整体思路（很关键）

我把前端接口异常分成 4 类：

1️⃣ 网络异常（断网 / 超时）
2️⃣ 登录态异常（Token 失效）
3️⃣ 权限异常（无权限）
4️⃣ 业务异常（code ≠ 0）

页面层只关心一件事：数据是否可用。

三、Axios 响应拦截器核心实现

关键代码：

axios.interceptors.response.use(  response => {    const { code, msg } = response.data    if (code === 0) {      return response.data    }    // Token 失效    if (code === 401) {      ElMessage.error('登录已过期，请重新登录')      router.push('/login')      return Promise.reject(msg)    }    // 业务异常    ElMessage.error(msg || '请求失败')    return Promise.reject(msg)  },  error => {    ElMessage.error('网络异常，请稍后再试')    return Promise.reject(error)  })

四、封装后的效果是什么？

页面里只剩一句：

const list = await getList()

没有：

• Token 判断
• code 判断
• 错误提示

页面只负责“展示数据”，不再关心“异常逻辑”。

五、这个改动带来的真实收益

✔ 页面代码明显变干净
✔ 接口规则变更，只改一处
✔ 新人接手项目成本降低
✔ 工程可维护性明显提升