Vuex 스토어에서 JWT 토큰을 새로 고친 후 Axios를 사용하여 요청 재시도

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 지식은 아직 걸음마 단계입니다.

몇 번 장난을 친 후에야 겨우 이 일을 할 수 있었다.

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

언급URL : https://stackoverflow.com/questions/60951579/using-axios-to-retry-request-after-refreshing-jwt-token-in-vuex-store