axios拦截器中error.response为undefined，遇401无法登出用户求排查

哈哈，这个坑我刚踩过！你的拦截器代码只处理了服务器返回错误响应（比如401、500这类带状态码的情况），但当请求根本没到达服务器，或者完全没收到服务器的响应时，error.response就会是undefined。

为什么会出现这个情况？ #

• 网络断了：用户没网，请求根本发不出去
• 请求超时：服务器在规定时间内没返回任何内容
• 服务器崩了：直接挂掉，连错误响应都没返回
• 跨域拦截：浏览器因为跨域问题直接拦截了请求，拿不到服务器响应

怎么修改你的代码？ #

你得先判断error.response是否存在，再处理401的逻辑，同时把其他异常情况也覆盖到：

axios.interceptors.response.use(
  response => response,
  error => {
    // 先检查是否有服务器返回的响应
    if (error.response) {
      const { status } = error.response;
      if (status === 401) {
        store.dispatch('snackBar', snackbarObj);
        // 这里加上你的登出逻辑，比如清token、跳登录页
        // localStorage.removeItem('authToken');
        // router.push('/login');
      }
    } else {
      // 处理没有响应的异常，比如提示用户网络问题
      console.error('请求出错啦：', error.message);
      // 也可以用你的snackBar提示用户
      // store.dispatch('snackBar', { message: '网络连接异常，请检查后重试', type: 'error' });
    }
    return Promise.reject(error);
  }
);

额外小 tips #

• 给Axios设置全局超时，避免请求一直挂着：

axios.defaults.timeout = 10000; // 10秒超时，按需调整

• 开发时可以打印完整的error对象，能更清楚看到是啥问题：

console.log('完整错误详情：', error);

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