Vuex Store实现鉴权时axios响应拦截器返回undefined问题求助

核心问题 #

你当前遇到的返回undefined问题，根源是axios响应拦截器的错误处理回调返回逻辑错误，其次还有两个可以优化的适配点：

修复步骤 #

1. 修正响应拦截器的错误返回逻辑 #

axios拦截器的错误处理分支，只有返回reject状态的Promise，才会把错误继续传递给上层请求的catch分支。你当前直接写return error会被包装成resolve状态的正常返回值，上层请求不会触发catch，自然拿不到错误对象，出现undefined。

修改axios.js的拦截器代码：

api.interceptors.response.use(response => {
  console.log('ok')
  return response;
}, error => {
  // 加兜底判断，避免断网/跨域等场景下error.response不存在报错
  if (error.response?.status === 401) {
    store.dispatch('log_out')
  }
  // 这里必须返回reject状态的Promise才能让上层catch捕获到错误
  return Promise.reject(error)
});

2. 补充axios初始化时的默认头配置 #

你当前axios.js中只在模块加载时读取了一次localStorage的token，但没有赋值给api实例的默认请求头，页面刷新后已登录的用户请求会丢失授权头。补充代码：

const api = axios.create({ baseURL: 'http://127.0.0.1:8000/' })
// 新增以下代码
if (token) {
  api.defaults.headers.common['Authorization'] = 'Bearer ' + token
}

现象解释 #

你提到仅在有token时才添加拦截器就运行正常，是因为登录阶段还没有token，拦截器不会被挂载，登录请求的错误会走原生axios的默认reject逻辑，直接传递到上层catch，所以不会出现undefined的问题。全局挂载拦截器后错误返回逻辑错误，才会导致异常。

内容的提问来源于stack exchange，提问作者Maarten Van Hoecke