为何axios响应拦截器中error.status不存在？如何处理401刷新令牌

问题原因 #

Axios的错误对象并非直接携带status属性，状态码实际存放在error.response对象中，且只有当请求成功发送到服务器并得到响应（包括4xx/5xx这类错误状态）时，error.response才会存在：

• 若请求未到达服务器（如网络故障、跨域失败），error.response会是undefined，此时连error.response.status都无法获取。
• 你直接访问error.status，自然会得到undefined。

修复代码 #

以下是包含401处理逻辑的完整拦截器代码：

Axios.interceptors.response.use(
  (res) => res,
  async (error) => {
    // 先判断是否存在服务器响应
    if (error.response) {
      const { status } = error.response;
      
      // 处理401状态码
      if (status === 401) {
        try {
          // 获取本地存储的刷新令牌
          const refreshToken = localStorage.getItem('refreshToken');
          // 调用刷新令牌接口
          const refreshRes = await Axios.post('/api/refresh-token', { refreshToken });
          
          // 更新本地的accessToken
          localStorage.setItem('accessToken', refreshRes.data.accessToken);
          // 更新原请求的Authorization头，带上新的token
          error.config.headers.Authorization = `Bearer ${refreshRes.data.accessToken}`;
          
          // 重新发起原请求
          return Axios(error.config);
        } catch (refreshErr) {
          // 刷新令牌失败，执行登出逻辑
          localStorage.removeItem('accessToken');
          localStorage.removeItem('refreshToken');
          window.location.href = '/login';
        }
      }
    } else {
      // 处理无服务器响应的情况（如网络错误）
      console.error('请求失败：', error.message);
    }
    
    // 将错误继续抛出，供后续业务代码处理
    return Promise.reject(error);
  }
);

额外注意事项 #

• 避免重复刷新：可以添加一个全局变量（如isRefreshing）标记是否正在刷新令牌，防止多个401请求同时触发刷新逻辑，造成重复调用。
• 原请求复用：重新发起请求时，要确保error.config中的请求头、参数等信息正确，尤其是要替换成新的accessToken。
• 边界情况处理：如果刷新令牌接口也返回401，说明刷新令牌已失效，必须引导用户重新登录。

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