我有使用JWT身份验证的vue.js app和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);
});