javascript - axios : TypeError: Cannot read property 'status' of undefined 错误

Question

好的，如果状态代码为 401，我的 index.js 中有一个拦截器来刷新 token ，这工作正常，但如果我返回，则在登录页面来自服务器的另一个状态代码，页面中的消息错误不起作用，因为 axios 拦截器未收到 401。

但是如果收到 401，拦截器工作正常。

这是一个截图。如果找不到用户，它会从服务器返回一个 404。

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

拦截器

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

响应拦截器必须返回响应、已解决的 promise 或已拒绝的 promise 。

您的拦截器具有不返回任何内容的逻辑路径，因此是您的问题。

你想要这样的东西......

axios.interceptors.response.use(
  (r) => r,
  (error) => {
    if (error.response.status === 401) {
      localStorage.removeItem("token");
      // make sure to return the new promise
      return axios
        .get("token/refresh", {
          params: {
            correo: window.localStorage.getItem("email"),
          },
        })
        .then((response) => {
          localStorage.setItem("token", response.data.token);
          // now replay the original request
          return axios.request(error.config);
        });
    }
    // not a 401, simply fail the response
    return Promise.reject(error);
  }
);