Vue.js 如何让axios拦截器重试原始请求?
我正在尝试在vue.js应用程序中实现令牌刷新。到目前为止,这是可行的,因为它会在401响应上刷新存储中的令牌,但我需要做的就是让拦截器稍后再次重试原始请求 main.jsVue.js 如何让axios拦截器重试原始请求?,vue.js,jwt,axios,vuex,Vue.js,Jwt,Axios,Vuex,我正在尝试在vue.js应用程序中实现令牌刷新。到目前为止,这是可行的,因为它会在401响应上刷新存储中的令牌,但我需要做的就是让拦截器稍后再次重试原始请求 main.js axios.interceptors.response.use( response => { return response; }, error => { console.log("original request", error.config);
axios.interceptors.response.use(
response => {
return response;
},
error => {
console.log("original request", error.config);
if (error.response.status === 401 && error.response.statusText === "Unauthorized") {
store.dispatch("authRefresh")
.then(res => {
//retry original request???
})
.catch(err => {
//take user to login page
this.router.push("/");
});
}
}
);
authRefresh(context) {
return new Promise((resolve, reject) => {
axios.get("auth/refresh", context.getters.getHeaders)
.then(response => {
//set new token in state and storage
context.commit("addNewToken", response.data.data);
resolve(response);
})
.catch(error => {
reject(error);
});
});
},
store.js
axios.interceptors.response.use(
response => {
return response;
},
error => {
console.log("original request", error.config);
if (error.response.status === 401 && error.response.statusText === "Unauthorized") {
store.dispatch("authRefresh")
.then(res => {
//retry original request???
})
.catch(err => {
//take user to login page
this.router.push("/");
});
}
}
);
authRefresh(context) {
return new Promise((resolve, reject) => {
axios.get("auth/refresh", context.getters.getHeaders)
.then(response => {
//set new token in state and storage
context.commit("addNewToken", response.data.data);
resolve(response);
})
.catch(error => {
reject(error);
});
});
},
我可以在控制台中记录error.config
并查看原始请求,但是有人知道我在这里做什么来重试原始请求吗?如果它失败了,还要阻止它一次又一次地循环
还是我完全错了?欢迎建设性的批评。您可以这样做:
axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
const originalRequest = error.config;
if (error.response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
const refreshToken = window.localStorage.getItem('refreshToken');
return axios.post('http://localhost:8000/auth/refresh', { refreshToken })
.then(({data}) => {
window.localStorage.setItem('token', data.token);
window.localStorage.setItem('refreshToken', data.refreshToken);
axios.defaults.headers.common['Authorization'] = 'Bearer ' + data.token;
originalRequest.headers['Authorization'] = 'Bearer ' + data.token;
return axios(originalRequest);
});
}
return Promise.reject(error);
});
当有多个请求同时运行时,这能工作吗?对不起,我不知道多个请求