Using Router in an interceptor located in index.js

Question

I have this piece of code located inside of the index.js file.

The situation here is that when there is an error code of 403, I want it so the user token is removed and then the login component is automatically rendered.

The problem is that index.js does not have access to this.props.history and hence can't use it, what is another way of redirecting to the login page?

axios.interceptors.response.use(res => {
    console.log(res);
    return res;
}, err => {
    console.log(err.response);
    if (err.response.status === 403) {
        AuthHelper.removeUserToken();
        // Go back to login page by this.props.history.push('/login');
    }
    return Promise.reject(err);
})

May be this answer can help you: [React-Router] [React-Router]: https://stackoverflow.com/a/42121109 — Gerardo Ortega, Jan 16 '19 at 22:59

score 0 · Answer 1 · answered Jan 16 '19 at 23:13

I see one approach which will work for you.

On receiving 403 set a flag in redux store(not sure if you are using it), if not you need to set it somewhere where it is accessible by all components.

Now in all components you can say

{token ? null:<Redirect to="/login" />}

Now whenever 403 is received in axios it will redirect to login page.

Using Router in an interceptor located in index.js

1 Answers1