我有使用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);
        });