Axios 401 response interceptor.

axios-401-response-interceptor.js

// Add a 401 response interceptor
window.axios.interceptors.response.use(function (response) {
    return response;
}, function (error) {
    if (401 === error.response.status) {
        swal({
            title: "Session Expired",
            text: "Your session has expired. Would you like to be redirected to the login page?",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes",
            closeOnConfirm: false
        }, function(){
            window.location = '/login';
            
            return Promise.reject(error)
        });
    } else {
        return Promise.reject(error);
    }
});

Where should I place this code?

Use above snippets inside index.js file (entry point) or at axios configuration file. Ref: https://github.com/axios/axios#interceptors

Thanks great work!

In case of redirect to login page you do not fulfill the promise.
You must return Promise.reject(error); after window.location

What about the server side rendering?
Is there any solution for that?

Thanks for this! worked smoothly

thanks:)
It was very helpful.

Thank you very much :)

I can't seem to get it to work, I get a "Network Error" without any response... I see I get a 401 in the browser network panel. Any Idea? Did this change?
Answer: It was a problem with CORS and how it was setup, so axios never got the information back from the browser. This should work as is

I can't seem to get it to work, I get a "Network Error" without any response... I see I get a 401 in the browser network panel. Any Idea? Did this change?
Answer: It was a problem with CORS and how it was setup, so axios never got the information back from the browser. This should work as is

Can you explain what you did or how you solved?

Nothing on the client side, this is a server side issue.

In my particular case (node.js - express) was the order of the filter, the CORS filter (dev environment) was added after the handler for this particular request, so the server wasn't sending the proper headers and thus the browser wasn't allowing the request to take place (there was no call to the server whatsoever).

@Avto9711 if you have a similar problem, you'll see it in the browser console. And it means you are trying to access a different URL over ajax, and that URL does not allow for that kind of interaction.

Thanks! 😁 🎉

Hey, I created the library for intercepting authentication called axios-auth-refresh. It deals with many edge cases, prevents loops, etc.
If you have some time, please, give it a try.

bro awesome

Thank you so much! 😁

Error object:

Great Job!!!

Nice, I'll try it. Thank you

good job!

Error object:

Thanks! Keep in mind that this object structure (e.g. presence of response object) depends on the error that occurred, so don't make assumptions about it.

For those who just want to reload the page without any message displayed:

window.axios.interceptors.response.use(function (response) { return response; }, function (error) { if (401 === error.response.status) { window.location.reload(true); } else { return Promise.reject(error); } });

Isn't using window.loction inefficient? Also, m not able to use any other routing. Can anyone suggest a better way? Thanks

Thanks you bro !!😎.

Watch out for false positives: If you use the same Axios instance to query other domains than your back end and that domain responds with status 401 your code will trigger.

Consider using a dedicated Axios instance to query other domains, or add something like that to the if (401 === error.response.status) condition:
&& isSameOrigin(error.response.request.responseURL)

/**
 * @param {string} url
 * @return {boolean}
 */
const isSameOrigin = url => {
    return new URL(window.location.href).origin === new URL(url).origin;
}

Good Point. Thanks.

I have a question?
What should I do if the API returns the 401 error code when the password does not match?

@hungpurdie You need the API to tell you that 401 is because of password mismatch specifically. In the following example the API responds 401 with a "Bad credentials." message only in that specific case:

axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (
            isSameOrigin(error.response?.request?.responseURL)
            && error.response?.status === 401
            && error.response?.data?.message !== 'Bad credentials.'
        ) {
            // Do something
        }

        return Promise.reject(error);
    }
);

In case of redirect to login page you do not fulfill the promise. You must return Promise.reject(error); after window.location

Agreed. return Promise.reject(error) needs to be called no matter what.

Gist adjusted and included the reject call. Thanks!

Awesome, great work!