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

Posted 2023-02-22

【中文标题】Axios 拦截器不会在页面加载时拦截

【英文标题】：Axios interceptor doesn't intercept on page load

【发布时间】：2018-01-20 18:29:37

【问题描述】：

我在我的 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，但仍然遇到同样的问题。

【参考方案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); );