Question

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

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

该错误与Login.vue有关，但是如果我删除index.js中的axios.interceptors，则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

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

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;
};

axios错误：TypeError：无法读取未定义的属性“状态”

1 个答案: