axios拦截器的最后一个请求

时间:2018-11-28 15:34:44

标签: vue.js axios

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

0 个答案:

没有答案