时间戳

首页 > 解决方案 > 在Vuex商店中刷新JWT令牌后使用Axios重试请求

vue.js - 在Vuex商店中刷新JWT令牌后使用Axios重试请求

问题描述

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

到目前为止，我在 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 知识还处于起步阶段

标签： vue.jsdjango-rest-frameworkaxiosjwtvuex

解决方案

经过一番玩耍后，我设法让这个工作：

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);
      });
  });

推荐阅读