Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Where is the correct place to put interceptors in React app? All calls get blocked after navigation

See original GitHub issue

Right now I have axios.interceptors.request.use in the Router component. I use it to make sure all requests have an access token. I put it there so I can access the React Context and save user data and user-related functions there.

However, I am having a weird bug that when I logout and then login again (without refreshing the page) the interceptor can’t make any calls after the login.

axios.interceptors.request.use( async(config) => {
  console.log(config)  // undefined

and I’m getting this error:

TypeError: Cannot read property 'cancelToken' of undefined
    at throwIfCancellationRequested (dispatchRequest.js:20)
    at dispatchRequest (dispatchRequest.js:33)

I tried putting it in the topmost component and still getting the same issue that after a redirect from login the calls are blocked again.

This is the entire component. The navigation inside the inner routes works fine, the only problem is navigating on and out of login page

const Routes = () => {
  const { user, refreshAccessToken } = useContext(UserContext)

  axios.interceptors.request.use( async(config) => {
    let accessToken = getAccessToken()
    let serverCallUrl = new URL(config.url)

    if (serverCallUrl.pathname.includes('/auth')) return config

    if (accessToken && user) {
      const { exp } = jwtDecode(accessToken)

      if (Date.now() > exp * 1000) {
        await refreshAccessToken()
        accessToken = getAccessToken()
      }

      config.headers['authorization'] = `Bearer ${accessToken}`
      config.headers['cache-control'] = `no-cache`

      return config
    }

  }, function (error) {
    return Promise.reject(error)
  })


  const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={
      props => user
        ? <HomePage renderProps={props}><Component/></HomePage>
        : <Redirect to={'/login'}/>
    }/>
  )


  return (
    <Router>
      <Switch>
        <Route
          exact path={'/'}
          render={() => <Redirect to={'/aaa'}/>}
        />
        <Route
          path={'/login'}
          render={() => user
            ? <Redirect to={'/aaa'}/>
            : <LogIn/>
          }
        />
        <PrivateRoute path='/aaa' component={Comp1}/>
        <PrivateRoute path='/bbb' component={Comp2}/>
        <PrivateRoute path='/ccc' component={Comp3}/>
      </Switch>
    </Router>
  )
}