[React / JWT] refresh token으로 access token 재발급 요청하기 (+ 9/15 추가)

young·2022년 9월 5일

JWT

First project (8/19~9/6)

목록 보기

7/10

액세스 토큰이 만료됐을 경우 reissue로 token을 보내서 액세스 토큰 재발급을 받는다.

만료됐을 경우.....?

아니.. 만료되기 전에 보내야 하는 거였다.
만료되기 전! 발급 받았을 당시 진작에 setTimeout으로 적절한 시간 설정을 해두고 미리미리 재발급 요청을 해놓아야 한다.

axios.interceptors.response.use()

말 그대로 응답을 가로채서 수행할 동작을 작성해놓으면 된다.

import axios from 'axios';

const TOKEN = localStorage.getItem('ACCESS_TOKEN');
const axiosInstance = axios.create({
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'Bearer ' + TOKEN,
  },
});

axiosInstance.interceptors.response.use(
  (response) => {
    return response;
  },
  async (error) => {
    const {
      config,
      response: { status },
    } = error;

    const originalRequest = config;

    if (status === 403) {
      const accessToken = localStorage.getItem('ACCESS_TOKEN');
      const refreshToken = localStorage.getItem('REFRESH_TOKEN');

      try {
        const { data } = await axios({
          method: 'post',
          url: `/members/reissue`,
          data: { accessToken, refreshToken },
        });
        const newAccessToken = data.data.accessToken;
        const newRefreshToken = data.data.refreshToken;
        originalRequest.headers = {
          'Content-Type': 'application/json',
          Authorization: 'Bearer ' + newAccessToken,
        };
        localStorage.setItem('ACCESS_TOKEN', newAccessToken);
        localStorage.setItem('REFRESH_TOKEN', newRefreshToken);
        return await axios(originalRequest);
      } catch (err) {
        new Error(err);
      }
    }
    return Promise.reject(error);
  }
);

export default axiosInstance;

원래 then...catch문으로 작성했는데
내가 생각한대로라면 "액세스토큰 만료 에러"가 발생하려고 하면,
그 응답을 가로채서 새로 요청을 보내는 것으로 알았는데

어째서인지 "액세스토큰 만료 에러"가 발생한 후에,
reissue로 요청을 보내는 것이 콘솔에 자꾸 보여서
혹시 비동기 처리가 잘 안되나 싶어서 알아보기 편한 async...await로 바꾸었다.

(아래는 나중에 뜯어보려고 킵해놓은 then...catch문)

// }).catch((err) => {
//   console.log(err);
//   alert(err.response.data.message);

// axiosInstance.interceptors.response.use(
//   (response) => {
//     return response;
//   },
//   async (error) => {
//     const {
//       config,
//       response: { status },
//     } = error;

//     const originalRequest = config;

//     if (status === 403) {
//       const accessToken = localStorage.getItem('ACCESS_TOKEN');
//       const refreshToken = localStorage.getItem('REFRESH_TOKEN');
//       await axios({
//         method: 'post',
//         url: `/members/reissue`,
//         data: { accessToken, refreshToken },
//       })
//         .then((response) => {
//           const newAccessToken = response.data.data.accessToken;
//           const newRefreshToken = response.data.data.refreshToken;
//           localStorage.setItem('ACCESS_TOKEN', newAccessToken);
//           localStorage.setItem('REFRESH_TOKEN', newRefreshToken);
//           console.log('newAccessToken ' + newAccessToken);
//           originalRequest.headers = {
//             'Content-Type': 'application/json',
//             Authorization: 'Bearer ' + newAccessToken,
//           };
//           return axios(originalRequest);
//         })
//         .catch((err) => {
//           console.log(err);
//           alert(err.response.data.message);
//         });
//     }
//     return Promise.reject(error);
//   }
// );