我正在我的 Vue 应用程序中实现 JWT 以进行授权,并在使用 token 后刷新它们。
我使用了 axios 拦截器,因此我可以拦截对我的 API 后端的每个请求,这似乎适用于登录等......但是一旦我刷新页面,请求就会使用最后一个 token 正常发出。
问题是 axios 拦截器此时似乎不起作用,因此一旦使用了 token ,我就无法使用新的来更新它。
这是我设置拦截器的方式:-
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
,但我仍然遇到同样的问题。
最佳答案
试试这个
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); });
关于ajax - Axios 拦截器不会在页面加载时拦截,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45648739/