Vue.js中Axios响应拦截器抢占catch路径 导致下游错误处理失效

1. 拦截器抢占catch调用链、丢失错误payload的原因 #

Axios响应拦截器的错误回调分支中，如果直接return error，会将错误对象作为成功态的Promise返回值向下传递，因此后续Promise链只会进入then分支，永远不会触发catch，同时错误payload会被当成正常返回值处理，自然无法被下游的错误逻辑捕获。

2. 必须使用._value取路由meta的原因 #

Vue3生态的vue-router 4.x中，router.currentRoute本身是一个标准的Vue Ref对象，公开的取值方式是调用.value属性。你用到的._value是Ref内部存储值的私有属性，仅用于Vue内部逻辑调用，不属于对外暴露的规范API，因此不建议业务代码直接依赖。

第一步：修改拦截器逻辑 #

修改interceptor.js文件，修正Promise返回值、替换私有属性调用，同时增加网络错误场景的兜底判断：

import axios from 'axios'
import store from '@/store/index'
export default (router) => {
  axios.interceptors.response.use(response => {
    return response;
  }, (error) => {
    // 先判断是否存在响应体，避免断网等无响应的场景触发报错
    if (error.response?.status === 401) {
      // 用公开API .value替代私有属性._value
      const requiresAuth = router.currentRoute.value.meta.requiresAuth
      if (requiresAuth) {
        console.log('token expired',error.response)
        store.dispatch('logout')
      }
    }
    // 返回拒绝态的Promise，才能让下游catch正常触发、拿到完整错误payload
    return Promise.reject(error)
  });
}

第二步：优化组件登录逻辑 #

拦截器修复后，登录请求的错误会正常进入catch分支，你可以把原来写在then里的错误判断移到catch中，逻辑更清晰：

methods: {
  login() {
    this.$store
      .dispatch('login', {
        username: this.username,
        password: this.password
      })
      .then(() => {
        this.$router.push({name: 'EventList'})
      })
      .catch(() => {
        // 此时catch分支可正常触发
        this.error ='No active account found with the given credentials.'
      })
  }
}

内容的提问来源于stack exchange，提问作者metalaureate