Axios Interceptors를 이용한 JWT 관리

Jiwon Yoo·2023년 8월 30일

React 프론트엔드

프론트엔드

목록 보기

30/38

Axios란?

Axios는 브라우저 및 Node.js를 위한 Promise 기반의 HTTP 비동기 통신 라이브러리이다.

Axios Interceptor란?

axios interceptor는 애플리케이션에서 처리하기 전에 Axios 라이브러리에서 수행한 HTTP 요청 또는 응답을 가로채고 수정하는 데 사용할 수 있는 기능이다.

Axios Interceptor 장점 (주관적)

1. 반복을 줄일 수 있다.

API 요청 시, Header에 accessToken을 담아야하는 경우, interceptors를 사용해 요청 전달 전 자동으로 Header에 accessToken 넣을 수 있다. 이렇게 하면 코드도 간결해지고 복잡성도 줄어든다.

2. 특정 에러를 통한 작업 처리

만료된 토큰으로 요청을 보내면 서버에서 401 Unauthorized 에러를 보내준다. 해당 에러를 받으면 refreshToken을 보내 새로운 accessToken을 발급받아서 토큰 만료로 실행되지 못했던 API가 호출될 수 있게 한다.

실 작성 코드

import axios from 'axios';

const instance = axios.create({
  baseURL: `${import.meta.env.VITE_APP_API_URL}`,
});

//요청시 AccessToken 계속 보내주기
instance.interceptors.request.use(
  function (config: any) {
    const accessToken = localStorage.getItem('accessToken');
    const refreshToken = localStorage.getItem('refreshToken');

    if (!accessToken && !refreshToken) {
      config.headers['Authorization'] = null;
      config.headers['refresh'] = null;
      return config;
    }

    if (config.headers && accessToken && refreshToken) {
      config.headers['Authorization'] = `${accessToken}`;
      config.headers['refresh'] = `${refreshToken}`;
      return config;
    }
  },
  function (error) {
    return Promise.reject(error);
  }
);

// AccessToken이 만료됐을때 처리
instance.interceptors.response.use(
  function (response) {
    return response;
  },
  async (error) => {
    const {
      config,
      response: { status },
    } = error;
	// 401 에러를 받으면 토큰 재발급 요청 실행
    if (status === 401) {
      const originalRequest = config;
      const refreshToken = localStorage.getItem('refreshToken');
      // 새로운 토큰 요청
      const response = await axios.post(
        `${import.meta.env.VITE_APP_API_URL}/auth/reissue`, //accessToken 재요청 api
        {},
        { headers: { refresh: `${refreshToken}` } } // refreshToken 전달
      );
      // 서버에서 재발급한 새로운 토큰 저장
      const newAccessToken = response.headers.authorization;
      localStorage.setItem('accessToken', newAccessToken);
	  // 실패했던 요청을 새로운 accessToken으로 재요청
      originalRequest.headers.authorization = `${newAccessToken}`;
      return axios(originalRequest);
    }

    return Promise.reject(error);
  }
);

export default instance;