在reactjs中添加axios拦截器的位置

我正在构建一个react应用程序。我想在令牌过期时重定向到登录。我可以使用axios拦截器来实现这一点。我将其添加到App.js中，如下所示

class App extends Component {

  constructor(props) {
    super(props)
    axios.interceptors.response.use((response) => {

      if (response.status === 401) {
        console.log("You are not authorized");
        //redirect
      }
      return response;
    }, (error) => {
      if (error.response && error.response.data) {
        return Promise.reject(error.response.data);
      }
      return Promise.reject(error.message);
    });
  }

  render() {

    return (
      <BrowserRouter>
        <Layout>
          <Switch>
            <PRoute path="/incident-reporting" component={Home}></PRoute>
            <RRoute exact={true} path="/" component={Login}></RRoute>
            <NFound></NFound>
          </Switch>
        </Layout>
      </BrowserRouter>
    );
  }
}

类应用程序扩展组件{
建造师（道具）{
超级（道具）
axios.interceptors.response.use（（response）=>{
如果（response.status==401）{
console.log（“您未经授权”）；
//重定向
}
返回响应；
}，（错误）=>{
if（error.response&&error.response.data）{
返回承诺.拒绝（错误.响应.数据）；
}
返回承诺.拒绝（错误.消息）；
});
}
render（）{
返回(
);
}
}

---

但它并没有像预期的那样发挥作用。我没有用钩子。我想知道在reactjs中在哪里添加拦截器。

您可以创建一个拦截器文件，并在需要使用

axios

import axios from 'axios';

const axiosInterceptor =  axios.interceptors.response.use((response) => {

      if (response.status === 401) {
        console.log("You are not authorized");
        //redirect
      }
      return response;
    }, (error) => {
      if (error.response && error.response.data) {
        return Promise.reject(error.response.data);
      }
      return Promise.reject(error.message);
    });

export default axiosInterceptor;

在你的组件中

import axiosInterceptor from './utils/axiosInterceptor.js'

class App extends Component {

  constructor(props) {
    super(props)

  }

  render() {

    return (
      <BrowserRouter>
        <Layout>
          <Switch>
            <PRoute path="/incident-reporting" component={Home}></PRoute>
            <RRoute exact={true} path="/" component={Login}></RRoute>
            <NFound></NFound>
          </Switch>
        </Layout>
      </BrowserRouter>
    );
  }
}

从“/utils/axiosInterceptor.js”导入axiosInterceptor
类应用程序扩展组件{
建造师（道具）{
超级（道具）
}
render（）{
返回(
);
}
}

如何将

axiosInterceptor

添加到App.js您可以添加到任何file.js中，并将该文件导入到要使用axios的位置