¿Cómo redirigir desde axios interceptor con react Router V4?

Ya no necesitas indagar más por todo internet porque llegaste al espacio justo, tenemos la respuesta que buscas sin complicarte.

Solución:

Lo resolví accediendo a mi tienda Redux desde fuera del árbol de componentes y enviándole mi misma acción desde el botón de cierre de sesión, ya que mis interceptores se crean en un archivo separado y se cargan antes de que se cargue cualquier componente.

Entonces, básicamente, hice lo siguiente:

En index.js expediente:

//....lots of imports ommited for brevity
import  createStore, applyMiddleware  from 'redux';
import reduxThunk from 'redux-thunk';
import reducers from './reducers';
import  UNAUTH_USER  from './actions/types'; //this is just a constants file for action types.

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
const store = createStoreWithMiddleware(reducers);

//Here is the guy where I set up the interceptors!
NetworkService.setupInterceptors(store);

//lots of code ommited again...
//Please pay attention to the "RequireAuth" below, we'll talk about it later

ReactDOM.render(
  
      
          

              

              

                  
                      
                      
                      
                      
                      
                  
              
          
      
  
  , document.querySelector('.main-container'));

y en el network-service.js expediente:

import axios        from 'axios';
import  UNAUTH_USER  from '../actions/types';

export default 
  setupInterceptors: (store) => 

    // Add a response interceptor
    axios.interceptors.response.use(function (response) 
        return response;
    , function (error) 
        //catches if the session ended!
        if ( error.response.data.token.KEY == 'ERR_EXPIRED_TOKEN') 
            console.log("EXPIRED TOKEN!");
            localStorage.clear();
            store.dispatch( type: UNAUTH_USER );
        
        return Promise.reject(error);
    );

  
;

Por último, pero no menos importante, tengo un HOC (componente de orden superior) en el que envuelvo mis componentes protegidos donde hago la redirección real cuando la sesión está fuera. De esa manera, cuando activo el tipo de acción UNAUTH_USER, establece mi isLogged propiedad en mi session reductor a false y, por lo tanto, este componente recibe una notificación y realiza la redirección por mí, en cualquier momento.

el archivo para require-auth.js componente:

import React,  Component  from 'react';
import  connect  from 'react-redux';

export default function(ComposedComponent) 

    class RequireAuth extends Component 

        componentWillMount() 
            if(!this.props.session.isLogged) 
                this.props.history.push('/login');
            
        ;

        componentWillUpdate(nextProps) 
            if(!nextProps.session.isLogged) 
                this.props.history.push('/login');
            
        ;

        render() 
            return 
        
    

    function mapStateToProps(state) 
        return  session: state.session ;
    

    return connect(mapStateToProps)(RequireAuth);

¡Espero que ayude!

Resolví esta tarea creando el historial del navegador desde history (https://github.com/ReactTraining/history) paquete y pasarlo a la función de interceptor y luego llamar .push() método de ella.

El código del archivo principal (parte de él):

// app.js
import  createBrowserHistory  from 'history';
import httpService from './api_client/interceptors';

...

const history = createBrowserHistory();
httpService.setupInterceptors(store, history);

Configuración del interceptor:

import axios from 'axios';

export default 
  setupInterceptors: (store, history) => 

      axios.interceptors.response.use(response => 
        return response;
      , error => 

      if (error.response.status === 401) 
        store.dispatch(logoutUser());
      

      if (error.response.status === 404) 
         history.push('/not-found');
      

      return Promise.reject(error);
    );
  ,
;

Además, debes usar Router desde react-router (https://github.com/ReactTraining/react-router) y pase el mismo objeto de historial que history parámetro

// app.js
...
ReactDOM.render(
  
     
        ...
     
  
, document.getElementById('#root'))

Esto parece funcionar para mí

 function (error) 
            var accessDenied = error.toString().indexOf("401");
            if (accessDenied !== -1) 
              console.log('ACCESS DENIED')
              return window.location.href = '/accessdenied'
            
          );

Si piensas que te ha sido provechoso nuestro artículo, sería de mucha ayuda si lo compartes con más desarrolladores así contrubuyes a extender este contenido.

---

---

Utiliza Nuestro Buscador