开发者问题收集

reactjs中axios拦截器在哪里添加

2019-11-13
6655

我正在构建一个 React 应用。我想在 token 过期时重定向到登录。我可以使用 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 中在哪里添加拦截器。

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>
    );
  }
}
ma_dev_15
2019-11-13