axios出错：TypeError：无法读取未定义的属性“status”

Question

好吧，我的index.js中有一个拦截器，如果状态代码为401则刷新令牌，这样可以正常工作，但是如果我从服务器返回另一个状态代码，则在登录页面中，页面中的消息错误无法正常工作，因为axios拦截器没有收到401.但如果收到401，拦截器工作正常。

这是关于此的截图。我从服务器返回404，如果没有找到用户

该错误与Login.vue有关，但是如果我删除了index.js中的axios.interceptors，则Login.vue中的“status”工作正常。

拦截器

axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === undefined) {
    return;
  } else {
    const code = error.response.status;
    if (code === 401) {
      localStorage.removeItem("token");
      axios.get("token/refresh", {
        params: {
          correo: window.localStorage.getItem("email")
        }
      }).then(response => {
        var refresh_token = response.data.token;
        localStorage.setItem("token", refresh_token);
      }).catch(error => {
        const response = error.response;
        console.log(response.data.errors);
      })
      return Promise.reject(error);
    }
  }
});

我试过在拦截器中使用这样的东西：

if(error.response.status == undefined) return;

但不行。

登录捕获

          .catch(error => {
        this.loading = false;
        if (error.response.status != null) {
          switch (error.response.status) {
            case 400:
              this.alertError = true;
              this.errorMessage = "No estás autorizado para acceder.";
              this.loading = false;
              break;
            case 500:
              this.alertError = true;
              this.errorMessage =
                "Hay un problema con el servidor, disculpa las molestias.";
              this.loading = false;
              break;
            case 404:
              this.alertError = true;
              this.errorMessage = "Vuelve a ingresar tu contraseña";
              break;
            default:
              this.alertError = true;
              this.errorMessage =
                "Hay un error interno en el servidor, intenta de nuevo más tarde";
          }
        }
      })

怎么处理？

Answer 1

从您的实现，您正在尝试刷新令牌。您可以做的是将刷新令牌处理转移到服务器端。因此，如果令牌过期，服务器将在标头中发送令牌，并在axios interceptors内部编写如下代码，以在标头包含身份验证令牌时更新本地存储。下面是我方项目的示例实现

export default () => {
const authTokenJson = localStorage.getItem('auth');

let axiosInstance = null;

if (authTokenJson) {
    const tokens = JSON.parse(authTokenJson);
    axiosInstance = axios.create({
        headers: {
            'authorization': `Bearer ${tokens.token}`,
            'refresh-token': `${tokens.refreshToken}`
        }
    });
} else {
    axiosInstance = axios.create();
}

axiosInstance.interceptors.response.use(
    response => {
        console.log(response);
        const tokens = {
            token: response.headers['authorization'],
            refreshToken: response.headers['refresh-token']
        };
        if (tokens.token && tokens.refreshToken) {
            setTokens(JSON.stringify(tokens));
        }
        return response;
    },
    err => {
        if (err.response.status === 401) {
            EventBus.$emit('errors:401');
        }
        return Promise.reject(err);
    }
);
return axiosInstance;
};