Axios Interceptor Does Not Intercept Page Load

Question

I embed JWT in my Vue application for authorization, and I update my tokens after using them.

I used axios interceptors, so I can intercept every request to my API server and it seems to work on login, etc .... but as soon as I refresh the page, the request is executed as usual, using the last token.

The problem is that axios interceptors are not working at the moment, so after using the token, I can’t update it with a new one.

Here is how I set up my interceptors: -

window.axios.interceptors.request.use(function (config) {
    console.log("Sent request!");

    return config;
}, function (error) {
    console.log("Failed sending request!");

    return Promise.reject(error);
});

window.axios.interceptors.response.use(function (response) {
    console.log("Got headers:", response.headers);
    if (response.headers.hasOwnProperty('authorization')) {
        console.log("Got authorization:", response.headers.authorization);
        Store.auth.setToken(response.headers.authorization);
    }

    return response;
}, function(err){
    console.log("Got error", err);
});

I have no download console.logon the page.

I install my interceptors in the root application beforeMount. I tried moving them to beforeCreateand I still get the same problem.

Answer 1

window.axios.interceptors.request.use(function (config) {
console.log("Sent request!");

if(localStorage.getItem('id_token')!=undefined){
    config.headers['Authorization'] = 'Bearer '+localStorage.getItem('id_token')
}
return config;}  , function (error) {
console.log("Failed sending request!");

return Promise.reject(error); });