How to write redirection inside the axios interceptors without reloading in React JS

Question

I used axios interceptors to maintain the internal server errors. I need to redirect to another url if the response have an error without reloading. Below code I used location.href. So it's reloading. I need a solution to redirect without refreshing the page.

I tried "Redirect" in react-router-dom. But it not works for me.

export function getAxiosInstance() {
    const instance = axios.create();
    const token    = getJwtToken();

    // Set the request authentication header
    instance.defaults.headers.common['Authorization'] = `Bearer ${token}`;

    // Set intercepters for response
    instance.interceptors.response.use(
        (response) => response,
        (error) => {
            if (config.statusCode.errorCodes.includes(error.response.status)) {
                return window.location.href = '/internal-server-error';
            }

            return window.location.href = '/login';
        }
    );

    return instance;
}

Can anyone help me to solve this out?

Ok you can import your store instance and dispatch an action that will change route in this case. Or you can adopt below solution in my answer. — Mosè Raguzzini, Jul 09 '19 at 13:07

score 6 · Accepted Answer · answered Jul 09 '19 at 12:50

6

This will take advantage of import caching:

// history.js
import { createBrowserHistory } from 'history'

export default createBrowserHistory({
  /* pass a configuration object here if needed */
})


// index.js (example)
import { Router } from 'react-router-dom'
import history from './history'
import App from './App'

ReactDOM.render((
  <Router history={history}>
    <App />
  </Router>
), holder)


// interceptor.js
import axios from 'axios';
import cookie from 'cookie-machine';
import history from '../history';

axios.interceptors.response.use(null, function(err) {
  if ( err.status === 401 ) {
    cookie.remove('my-token-key');
    history.push('/login');
  }

  return Promise.reject(err);
});

answered Jul 09 '19 at 12:50

Mosè Raguzzini

15,399
1
31
43

2

I used history library. It doesn't work for me. Only changed the browser url. Not redirect. – Hemantha Dhanushka Jul 12 '19 at 10:21
You have to export the instance of browserHistory, not browserHistory itself – Mosè Raguzzini Jul 12 '19 at 10:55
I do the same thing in your answer. Instead of 'Router', I am using 'BrowserRouter' from react-router-dom. What do you mean by "export the instance of browserHistory, not browserHistory itself". – Hemantha Dhanushka Jul 12 '19 at 12:42
Take a look at my history.js file, if it is exported like this for both app and axios abstraction, they refer to the same history object – Mosè Raguzzini Jul 12 '19 at 12:44
I use this method when I do no have redux, while using redux I simply dispatch an action that act on the same history object – Mosè Raguzzini Jul 12 '19 at 12:47
I am using . This solution is not working with . How to make it work with HashRouter? – Muhammad Inaam Munir Jan 14 '20 at 14:50
Is this still a valid appraoch? – mleister Oct 25 '20 at 20:41
@HemanthaDhanushka the same problem occurs with me – Hassam Saeed Oct 14 '21 at 13:04

score 2 · Answer 2 · answered Jul 09 '21 at 09:51

I solved this by passing useHistory() from inside a <Router> to axios interceptors.

App.js:

// app.js

function App() {
  return (
    <Router>
      <InjectAxiosInterceptors />

      <Route ... />
      <Route ... />
    </Router>
  )
}

InjectAxiosInterceptors.js:

import { useEffect } from "react"
import { useHistory } from "react-router-dom"
import { setupInterceptors } from "./plugins/http"

function InjectAxiosInterceptors () {
  const history = useHistory()

  useEffect(() => {
    console.log('this effect is called once')
    setupInterceptors(history)
  }, [history])

  // not rendering anything
  return null
}

plugins/http.js:

import axios from "axios";

const http = axios.create({
  baseURL: 'https://url'
})

/**
 * @param {import('history').History} history - from useHistory() hook
 */
export const setupInterceptors = history => {
  http.interceptors.response.use(res => {
    // success
    return res
  }, err => {
    const { status } = err.response
  
    if (status === 401) {
      // here we have access of the useHistory() from current Router
      history.push('/login')
    }
  
    return Promise.reject(err)
  })
}

export default http

score -1 · Answer 3 · answered Jul 09 '19 at 12:39

-1

You should use a history object to push new location. Check this question How to push to History in React Router v4?. This should help.

answered Jul 09 '19 at 12:39

Mykola Prymak

447
3
5

1

I used history library. It doesn't work for me. Only changed the browser url. No redirection happen. – Hemantha Dhanushka Jul 12 '19 at 10:27

How to write redirection inside the axios interceptors without reloading in React JS

3 Answers3