我有使用JWT身份验证的vue.js应用程序和Web api REST服务。 当我在api上调用某些操作但从中得到401时,表明令牌已过期,问题就开始了。
所以我用axios拦截器在我的app.vue组件上捕获了所有这些响应:
let refreshTokenPromise;
function getRefreshedToken() {
if (!refreshTokenPromise) {
refreshTokenPromise = userService.refresh();
refreshTokenPromise.then(
resetRefreshTokenPromise,
resetRefreshTokenPromise
);
}
return refreshTokenPromise;
}
function resetRefreshTokenPromise() {
refreshTokenPromise = null;
}
Axios.interceptors.response.use(null, error => {
if (error.config && error.response && error.response.status === 401) {
return getRefreshedToken().then(response => {
store.dispatch("refresh", response.data).then(response => {
error.config.headers = authHeader();
error.config.baseURL = undefined;
return Axios.request(error.config);
});
});
}
return Promise.reject(error);
});
然后,当我尝试调用对api发出的原始请求(获取/更新某些数据)时,原始请求已被调用,但是由于某些原因未定义response.data对象。
对于该示例,我们说这是原始调用:
fetchUserData() {
var vm = this;
userService
.get()
.then(response => {
if (response.data) {
vm.profile.firstName = response.data.firstName;
vm.profile.lastName = response.data.lastName;
vm.profile.cityID = response.data.cityID;
vm.profile.address = response.data.address;
vm.profile.cellPhoneNumber = response.data.cellPhoneNumber;
vm.profile.birthDate = response.data.birthDate;
}
})
.catch(error => {
console.log(error);
});