Axios 拦截器不会在页面加载时拦截

Question

我在我的 Vue 应用程序中实施 JWT 以进行授权，并且在使用令牌后刷新我的令牌。

我使用了 axios 拦截器，因此我可以拦截对我的 API 后端的每个请求，这似乎适用于登录等...但是一旦我刷新页面，请求就会使用最后一个令牌正常发出。

问题是 axios 拦截器此时似乎不起作用，所以一旦使用了令牌，我就无法用新的来更新它。

我是这样设置拦截器的：-

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);
});

我在页面加载时没有收到任何 console.log。

我在根应用程序的beforeMount 方法中设置我的拦截器。我尝试将它们移至beforeCreate，但仍然遇到同样的问题。

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); });