reactjs在哪里添加axios拦截器

Question

我正在构建一个反应应用程序。我想在令牌过期时重定向到登录。我可以使用 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>
    );
  }
}

但它没有按预期工作。我没有使用钩子。我想知道reactjs在哪里添加拦截器。

Answer 1

您可以创建一个拦截器文件并在您想使用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>
    );
  }
}