在Vuex商店中刷新JWT令牌后使用Axios重试请求答案

【问题标题】：Using Axios to retry request after refreshing JWT token in Vuex store在Vuex商店中刷新JWT令牌后使用Axios重试请求
【发布时间】：2020-07-12 01:31:01
【问题描述】：

我正在尝试使用 Axios 重试由于 JWT 到期而失败的请求

到目前为止，我在 Vue 组件的方法中遵循了以下请求：

  getAPI2.get("/api/v1/sessions/",{ headers: headers }).then(response => {
          console.log(response);
          this.items = response.data.items;
      });

这是在遇到错误时使用下面的拦截器

const getAPI2 = axios.create({
  baseURL: '/'
})


getAPI2.interceptors.response.use(response => response, err => {
  if (err.config && err.response && err.response.status === 401) {
    store.dispatch('refreshToken')
      .then(access => {

        axios.request({
          method: 'get',
          headers: { Authorization: `Bearer ${store.state.accessToken}` },
          url: err.config.url
        }).then(response => {
          console.log('Successfully got data')
          console.log(response)
          return response;
        }).catch(err => {
          console.log('Got the new access token but errored after')
          return Promise.reject(err)
        })
      })
      .catch(err => {
        return Promise.reject(err)
      })
  }
})

当请求遇到错误并通过拦截器时，我看到了数据，但我认为将响应传递回我的组件时存在问题

抱歉，如果这很明显，我的 JavaScript 知识还处于起步阶段

【问题讨论】：

你能详细说明passing back the response to my component吗？我真的没有在您的问题中看到任何可以自动为您执行此操作的代码。您可能希望在名为retryFailed 或retrySucceeded 的商店中设置某种标志，然后让组件使用它。这些标志将设置在拦截器的内部 then 块中。
其实，要修改我之前的建议，我只是注意到拦截器不在商店中。商店可能应该处理在您使用 store.dispatch('refreshToken') 启动的 refreshToken 操作中设置这些标志。
谢谢，我想也许我误解了拦截器应该做什么，我认为它会捕获错误然后在调用'refreshToken'后返回成功的响应
诚然，axios 处理拦截器的方式可能与我预期的不同。我刚刚检查了文档，并意识到你可以做你想做的事情。但是，我注意到的另一件事是您可能忘记将return 放在store.dispatch('refreshToken') 前面。这是 promise 最常见的初学者错误之一（忘记返回它们）。

标签： vue.js django-rest-framework axios jwt vuex

【解决方案1】：

在玩了一些之后，我设法让它工作了：

const getAPI3 = axios.create({
  baseURL: '/'
})

  getAPI3.interceptors.response.use( (response) => {
    // Return normal response
    return response;
  }, (error) => {
    // Return non auth error
    if (error.response.status !== 401) {
      return new Promise((resolve, reject) => {
        reject(error);
      });
    }

    return store.dispatch('refreshToken')
      .then((token) => {

        // Make new request
        const config = error.config;
        config.headers = { Authorization: `Bearer ${store.state.accessToken}` }

        return new Promise((resolve, reject) => {
          axios.request(config).then(response => {
            resolve(response);
          }).catch((error) => {
            reject(error);
          })
        });

      })
      .catch((error) => {
        Promise.reject(error);
      });
  });

【讨论】：