Question

JWT令牌在1小时后过期后，我一直在努力实现react自动注销。我是在React中使用axios拦截器的新手。我进行了大量搜索以了解React API请求中的拦截器用例，但无法完全实现。

这是我尝试遵循的拦截方法：

import axios from 'axios';
import LocalData from '../localstorage';
import { Redirect } from 'react-router-dom';


const getToken = LocalData.getLocalData('currentUser', 'getToken');


function ReqResInterceptor(){


    // Add a request interceptor
    const reqIntercept = axios.interceptors.request.use(
        config => {
            const token = getToken;
            if(token){
                config.headers['x-access-token'] = token;
                config.headers['Content-Type'] = 'application/json';
            }
            return config;        
        },
        (error) => {
            Promise.reject(error);
        }
    );


    //Add a response interceptor
    const resIntercept = axios.interceptors.response.use((response) => {
        return response
    }, () => {
        if(error.response.status === 401){
            LocalData.removeLocalData();
            <Redirect to="/login" />
            return Promise.reject(error);
        }
    })

}

export default ReqResInterceptor;

这是我受保护的路由范围内的组件：

class DefaultLayout extends Component {

  loading = () => <div className="animated fadeIn pt-1 text-center">Loading...</div>


  componentDidMount(){
    let userInfo = LocalData.getLocalData('currentUser', 'all');
    console.log(userInfo);

    if (userInfo.success === false && userInfo.responseStatus === 401){
      LocalData.removeLocalData();
      return <Redirect to="/login"/>
    }
  }


  signOut(e) {
    //e.preventDefault();
    LocalData.removeLocalData();
    this.props.history.push('/login')
  }

  render() {
    //console.log(this.props)
    return ( ....
}

还有我的App.js

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './App.scss';
import ProtectedRoute from './containers/AuthContext/ProtectedRoute';
import ReqResInterceptor from './containers/helpers/AxiosInterceptor/AxiosInterceptor';


const loading = () => <div className="animated fadeIn pt-3 text-center loader"></div>;

// Containers
const DefaultLayout = React.lazy(() => import('./containers/DefaultLayout'));

// Pages
const Login = React.lazy(() => import('./views/Pages/Login'));
const Register = React.lazy(() => import('./views/Pages/Register'));

class App extends Component {

  render() {

    return (

        <BrowserRouter>
          <React.Suspense fallback={loading()}>
            <Switch>
              <ReqResInterceptor />
                  <Route exact path="/login" component={Login} />
                  <Route exact path="/register" component={Register} />
                  <Route path="/" component={ProtectedRoute(DefaultLayout)} />
            </Switch>
          </React.Suspense>
        </BrowserRouter>

    );
  }
}

export default App;

我对使用拦截器实现自动重定向感到困惑。请帮忙弄清楚。

Answer 1

需要将axios拦截器附加到发出请求的实例。看来您正在尝试将拦截器作为jsx组件添加到dom-tree中，这可能无法正常工作。

要使其工作，请在进行调用之前将拦截器添加到axios实例中。

import axios from 'axios';

const instance = axios.create();
// Add your interceptors here
instance.interceptors.request.use((config) => {});
instance.interceptors.response.use((response) => {});

export default instance;

现在，您可以将axios实例与添加的拦截器一起使用。

在401 axios拦截器上自动注销用户

1 个答案: