axios 响应拦截器无法处理过期的 refresh_token (401)答案

【问题标题】：axios response Interceptor unable to handle an expired refresh_token (401)axios 响应拦截器无法处理过期的 refresh_token (401)
【发布时间】：2019-04-20 09:27:07
【问题描述】：

我在 ComponentDidMount() 的 App.js 中的 axios 响应中有以下拦截器，它不适用于所有 axios 请求。

    axios.interceptors.response.use(function (response) {

        if (response)
            return response;
    }, function (error) {

        if (error.response && 401 == error.response.status) {
            console.log('401')
            return Promise.reject(error);
        }
        else {
            return Promise.reject(error);
        }
    });

当我调用 API 并收到 401 错误时，此代码对我不起作用。我在另一个组件中使用此代码，我无法处理 401 错误

  axios
  .get("/web-api/home/", { headers: headers })
  .then(response => {
    this.setState({
      homeconfig: response.data
    });
  })
  .catch((response) => {
    console.log(response);
  });

【问题讨论】：

标签： reactjs axios interceptor

【解决方案1】：

您已将 axios 拦截器设置在 ComponentDidMount 中。在此配置之前，子组件可能正在调用请求。（特别是如果您在子组件的构造函数中调用请求）。因此，您应该在安装任何组件之前进行此配置。将您的配置放在 componentWillMount 或构造函数中（我更喜欢构造函数，因为 componentWillMount 将在较新版本的 react-17 中被弃用）。

【讨论】：