React Axios TypeScript with JWT Boilerplate

 💡 Axios 메소드들의 타입 설정과 인스턴스 기본 설정 그리고 토큰 만료 시 재발급 로직에 대해 작성하였습니다.

 

Axios Type Setting

interface CustomInstance extends AxiosInstance {
  get<T>(...params: Parameters<AxiosInstance['get']>): Promise<T>;
  delete<T>(...params: Parameters<AxiosInstance['delete']>): Promise<T>;
  post<T>(...params: Parameters<AxiosInstance['post']>): Promise<T>;
  put<T>(...params: Parameters<AxiosInstance['put']>): Promise<T>;
  patch<T>(...params: Parameters<AxiosInstance['patch']>): Promise<T>;
}

Create Axios

새로운 Axios 인스턴스를 client 이름으로 생성하고 호출되는 URL 앞에 고정적으로 붙는 BaseURL 설정해준다. 또한 모든 요청에 대해 자격 증명을 포함하는 withCredentials 옵션을 켜주어 쿠키, HTTP 인증 헤더 증명 요청을 보낼 수 있게 된다.

const BASEURL = ${BASEURL};
const client: CustomInstance = axios.create();
client.defaults.baseURL = BASEURL;
client.defaults.withCredentials = true;

Axios Interceptors

Request Interceptors

쿠키에 accessToken을 가지고 있다면 Request Header에 액세스 토큰을 넣어서 보내준다. 없다면 백단에서 401 unauthorized 에러를 응답할 것이다.

Response Interceptors

Axios Response에 대해 로그를 찍는다. 에러 처리는 모두 reject 시키고 401 에러는 로그아웃을 진행시킨다.

// Request
client.interceptors.request.use(
  function (config: InternalAxiosRequestConfig) {
    const accessToken = getCookie('accessToken');

    if (accessToken) {
      config.headers['Authorization'] = 'Bearer ' + accessToken;
    }

    return config;
  },
  function (error) {
    return Promise.reject(error);
  },
);

client.interceptors.response.use(
  function (response) {
    const url = response.config.url;

    console.log(
      `%cURL Info : ${url}-------------------------------------`,
      'background: #000; color: #bada55',
    );
    if (response.config.method !== 'get') {
      console.log(response.config.data);
    }
    console.log(response.data);
    console.log(
      '%c------------------------------------------------------------',
      'background: #000; color: #bada55',
    );

    if (response.data === null) {
      return response;
    }

    return response.data;
  },
  async error => {
    errorLog(error);
    if (error.response.status !== 401 || error.config.sent) {
      return Promise.reject(error);
    }

    error.config.sent = true;
    return await unAuthProcess(error).catch(() => logout());
  },
);

export { client };

Example

client.post("board/update")
  .then(res => console.log(res))
  .catch(err => console.log(err));

Login Axios with JWT Token

로그인 시 사용할 Axios 인스턴스를 새로 생성하였다. ID, PWD를 넘기면 AccessToken, RefreshToken 전달을 받고 쿠키에 저장 후 필요할 때 마다 꺼내 쓴다.

    loginAxiospost('user/login', { userId, password })

loginAxios.interceptors.response.use(
  function (response) {
    setCookie('accessToken', response.data.accessToken);
    setCookie('refreshToken', response.data.refreshToken);

    if (response.config.url === '/logout') {
      return '';
    }

    return response.data;
  },
  error => {
    errorLog(error);
    return Promise.reject(error);
  },
);

export { loginAxios };

Refresh Token 토큰 재발급

Access Token 만료가 되면 기존 API 요청을 저장해두고 Refresh Token으로 토큰 재발급을 진행한다. 진행중 들어오는 API 요청에 대해서는 구독 시스템을 이용해 배열에 담아두었다가 토큰 재발급이 성공하면 그때 모든 API 요청을 실행한다.

// 토큰 재발급 중 들어오는 API 요청을 구독할 변수
let subscribers: Array<() => void> = [];
// 토큰 재발급 중 다른 API가 들어오는지 아닌지 판단하는 변수
let lock = false;

const unAuthProcess = async ({config}: {config: InternalAxiosRequestConfig;})
: Promise<void | AxiosResponse> => {
	//토큰 만료로 응답 못받은 API 요청 저장
  const originalRequest = <InternalAxiosRequestConfig>config;

	// 토큰 재발급 중 다른 API가 먼저 들어왔다면 다음에 들어온 API 요청은 구독
  if (lock) {
    return onSubscribe(() => client(originalRequest));
  }

  lock = true;
  await reissueAccessToken();
  // 토큰 만료로 응답 못받은 API 재실행
  return client(config);
};

// 액세스 토큰 넣었던 자리에 리프레쉬 토큰 넣어서 요청
tokenAxios.interceptors.request.use(
  function (config) {
    config.headers['Authorization'] = 'Bearer ' + getCookie('refreshToken');
    return config;
  },
  error => {
    return Promise.reject(error);
  },
);

// 구독 변수에 토큰 만료로 응답 못받은 API 요청 구독
function onSubscribe(cb: () => void) {
  subscribers.push(cb);
}

// 토큰 만료로 응답 못받은 API 요청 실행
function onPublish() {
  subscribers.forEach(cb => cb());
}

const reissueAccessToken = async (): Promise<string | void> => {
  try {
	  //리프레쉬 토큰으로 액세스 토큰 재발급 API 요청
    const { data } = await tokenAxios.post<TokenType>('user/reissue');
    lock = false;
    onPublish();
    subscribers = [];
    setCookie('accessToken', data.accessToken);

    return data.accessToken;
  } catch (e) {
    subscribers = [];
    // 실패 시 로그아웃 진행
    logout();
  }
};

function logout() {
  window.location.href = '/login';
  lock = false;
  removeCookie('accessToken');
  removeCookie('refreshToken');
}

원본 코드

import axios, { AxiosError, AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
import { getCookie, removeCookie, setCookie } from './Cookie';

interface CustomInstance extends AxiosInstance {
  get<T>(...params: Parameters<AxiosInstance['get']>): Promise<T>;
  delete<T>(...params: Parameters<AxiosInstance['delete']>): Promise<T>;
  post<T>(...params: Parameters<AxiosInstance['post']>): Promise<T>;
  put<T>(...params: Parameters<AxiosInstance['put']>): Promise<T>;
  patch<T>(...params: Parameters<AxiosInstance['patch']>): Promise<T>;
}

export interface GetResponse {
  responseMessage?: string;
  statusCode?: number;
}

const BASEURL = ${BASEURL};
const client: CustomInstance = axios.create();
client.defaults.baseURL = BASEURL;
client.defaults.withCredentials = true;

client.interceptors.request.use(
  function (config: InternalAxiosRequestConfig) {
    const accessToken = getCookie('accessToken');

    if (accessToken) {
      config.headers['Authorization'] = 'Bearer ' + accessToken;
    }

    return config;
  },
  function (error) {
    return Promise.reject(error);
  },
);

client.interceptors.response.use(
  function (response) {
    const url = response.config.url;
    console.log(response);
    console.log(
      `%cURL Info : ${url}-------------------------------------`,
      'background: #000; color: #bada55',
    );
    if (response.config.method !== 'get') {
      console.log(response.config.data);
    }
    console.log(response.data);
    console.log(
      '%c------------------------------------------------------------',
      'background: #000; color: #bada55',
    );

    if (response.data === null) {
      return response;
    }

    return response.data;
  },
  async error => {
    errorLog(error);
    if (error.response.status !== 401 || error.config.sent) {
      return Promise.reject(error);
    }

    error.config.sent = true;
    return await unAuthProcess(error).catch(() => logout());
  },
);

export { client };

const loginAxios: CustomInstance = axios.create();

loginAxios.defaults.baseURL = BASEURL;
loginAxios.defaults.withCredentials = true;

loginAxios.interceptors.response.use(
  function (response) {
    setCookie('accessToken', response.data.accessToken);
    setCookie('refreshToken', response.data.refreshToken);

    if (response.config.url === '/logout') {
      return '';
    }

    return response.data;
  },
  error => {
    errorLog(error);
    return Promise.reject(error);
  },
);

export { loginAxios };

const errorLog = (error: AxiosError | Error) => {
  if (axios.isAxiosError(error)) {
    const { message, config, response } = error;

    console.log(message);
    console.log(config?.url);
    console.log(response);
  }

  if (axios.isAxiosError(error)) {
    console.log(
      `%cURL Info : ${error?.config?.url}-------------------------------------`,
      'background: #000; color: #2CD4A8',
    );
    if (error.response) {
      console.log(error.response);
      console.log(
        `%cError Code : ${error?.response.status} ${error.response.statusText}\nError Msg  : ${error.response.data.responseMessage}`,
        'background: #000; color: #2CD4A8',
      );
    } else if (error.request) {
      console.log(error.request.statusText);
      console.log(error);
      console.log(
        `%cError Code : ${error.request.status} ${
          error.request.statusText || error.message
        }\nError Msg  :`,
        'background: #000; color: #2CD4A8',
      );
    }
  } else {
    console.log(error);
  }
};

const tokenAxios: CustomInstance = axios.create();

tokenAxios.defaults.baseURL = BASEURL;
tokenAxios.defaults.withCredentials = true;

let subscribers: Array<() => void> = [];
let lock = false;

tokenAxios.interceptors.request.use(
  function (config) {
    config.headers['Authorization'] = 'Bearer ' + getCookie('refreshToken');
    return config;
  },
  error => {
    return Promise.reject(error);
  },
);

function onSubscribe(cb: () => void) {
  subscribers.push(cb);
}

function onPublish() {
  subscribers.forEach(cb => cb());
}

const unAuthProcess = async ({
  config,
}: {
  config: InternalAxiosRequestConfig;
}): Promise<void | AxiosResponse> => {
  const originalRequest = <InternalAxiosRequestConfig>config;

  if (lock) {
    return onSubscribe(() => client(originalRequest));
  }

  lock = true;
  await reissueAccessToken();
  return client(config);
};

interface TokenType extends GetResponse {
  data: { accessToken: string; refreshToken?: string };
}

const reissueAccessToken = async (): Promise<string | void> => {
  try {
    const { data } = await tokenAxios.post<TokenType>('user/reissue');
    lock = false;
    onPublish();
    subscribers = [];
    setCookie('accessToken', data.accessToken);

    return data.accessToken;
  } catch (e) {
    subscribers = [];
    logout();
  }
};

function logout() {
  window.location.href = '/login';
  lock = false;
  removeCookie('accessToken');
  removeCookie('refreshToken');
}