● [Main-Project] axios인스턴스와 axios 인터셉터를 활용해 만료된 accessToken 재발급받기

저희팀은 만료되었을 때, 재발급을 받는 방식을 시간상 구현하지 못했어서, 추가적으로 리팩토링을 진행하였습니다.

import axios, { AxiosRequestConfig } from 'axios';
import { postTokenRefesh } from '@/api/queryfn';
import { RefreshToken } from '@/types/tokenApiType';

export const EXPIRED_TIME = 1000 * 60 * 60 * 23;

export const refreshInterceptor = async (
  config: AxiosRequestConfig,
): Promise<any> => {
  const expiresIn = window.localStorage.getItem('expiresTime');

  // 만료시간이 없을 경우
  if (expiresIn === null) return config;

  const now = Date.now();
  const expiresDate = Number(expiresIn.replace(/\D/g, '')) + EXPIRED_TIME;

  // 만료시간이 현재 시간보다 큰 경우

  if (expiresDate >= now) return config;

  // 만료시간보다 현재 시간이 큰 경우
  if (expiresDate < now) {
    window.localStorage.setItem('expiresTime', `${Date.now() + EXPIRED_TIME}`);
    const { accessToken, refreshToken } =
      (await postTokenRefesh()) as RefreshToken;
    window.localStorage.setItem('accessToken', JSON.stringify(accessToken));
    window.localStorage.setItem('refreshToken', JSON.stringify(refreshToken));

    return config;
  } else {
    return config;
  }
};

const axiosInstance = axios.create();

axiosInstance.interceptors.request.use(refreshInterceptor);

export default axiosInstance;

위와 같이 인터셉터를 활용해 refreshInterceptor를 활용해 expired 시간을 두어, 시간보다 작으면 config를 리턴하게하고, 이외의 경우 accessToken을 재발급 받는 함수를 실행하였습니다. 이후 발급받은 이후에는 로컬스토리지에 저장되게 하였습니다.

그 다음 인스턴스를 만들고 그 인스턴스에 interceptor를 달아주었습니다 허허..

export const patchMutation = async (body: MutationProp) => {
  const { url, accessToken } = body;
  const result = await axiosInstance.patch(
    url,
    {},
    ....
    
    
export const patchFormMuation = async (body: MethodFormProp) => {
  const { formData, url, accessToken } = body;
  const result = await axiosInstance.patch(url, formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
      Authorization: accessToken,
      ....

다음 모든 요청에 아까 만들었던 axiosInstance를 불러와 인터셉터가 실행되게 하였습니다. 즉, 모든 요청마다 accessToken 만료시간이 지났는지 확인하고 지났다면 accessToken을 재발급 받아 로컬스토리지에 저장되게 한것입니다!!

인터셉터.. 너무신기하다..! 이번에 loader도 준석님덕에 알게됏는데,, 좋은 팀원을 만났던 것 같다!

이로서 우리 팀의 리팩토링이 마무리되었다. ㅠ_ㅠ 정확히 9월 둘째 주까지 모든게 이뤄졌다..!! 시간을 완전 엄수했다..ㅋㅋ