React Axios 인터셉터 사용법

axios interceptor란?

• axios interceptor는 애플리케이션에서 처리하기 전에 Axios 라이브러리에서 수행한 HTTP 요청 또는 응답을 가로채고 수정하는 데 사용할 수 있는 기능이다.
• 요청에 인증 헤더 추가, 오류 처리 또는 요청 및 응답 로깅과 같은 다양한 용도로 사용할 수 있다.
• interceptor는 전역적으로 Axios 인스턴스에 추가하거나 개별 요청 또는 응답에 추가할 수 있다.

axios interceptor 장범

• 헤더 수정, 인증 토큰 추가, 오류 처리, 요청 및 응답 기록 등을 할 수 있다.
• 모든 요청 또는 응답에서 동일한 코드를 반복하지 않아도 되어서 코드가 더 간결해지고 유지 관리가 쉬워진다.
• 애플리케이션에서 요청 및 응답이 처리되는 방식을 표준화하는 방법을 제공한다.

axios interceptor 기능

• 'Interceptors request'는 request가 전송되기 전에 실행되는 기능이다. request 구성 또는 헤더를 수정하고, 인증 토큰 또는 기타 데이터를 추가하고, 서버에 요청을 보내기 전에 다른 작업을 수행할 수 있다.

직접해보자!

1. Axios 인스턴스 생성

const instance = axios.create({
  // 상대적인 URL을 인스턴스 메서드에 전달하려면 baseURL을 설정하는 것은 편리하다.
  // URL(서버 주소) 예시 - http://127.0.0.1:5500
  baseURL: URL,
  // 요청이 timeout보다 오래 걸리면 요청이 중단된다.
  timeout: 1000,
});

2. 요청 인터셉터 추가하기

• 요청이 전달되기 전에 작업 수행, 요청 오류가 있는 작업 수행을 할 수 있는 2개의 콜백 함수를 받는다.

instance.interceptors.request.use(
  (config) => {
    // getToken() - 클라이언트에 저장되어 있는 액세스 토큰을 가져오는 함수
    const accessToken = getToken();

    config.headers['Content-Type'] = 'application/json';
    config.headers['Authorization'] = `Bearer ${accessToken}`;

    return config;
  },
  (error) => {
    console.log(error);
    return Promise.reject(error);
  }
);

3. 응답 인터셉터 추가하기

• 응답 데이터가 있는 작업 수행, 응답 오류가 있는 작업 수행을 할 수 있는 2개의 콜백 함수를 받는다.

instance.interceptors.response.use(
  (response) => {
    if (response.status === 404) {
      console.log('404 페이지로 넘어가야 함!');
    }

    return response;
  },
  async (error) => {
    if (error.response?.status === 401) {
      // isTokenExpired() - 토큰 만료 여부를 확인하는 함수
      // tokenRefresh() - 토큰을 갱신해주는 함수
      if (isTokenExpired()) await tokenRefresh();

      const accessToken = getToken();

      error.config.headers = {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${accessToken}`,
      };

      // 중단된 요청을(에러난 요청)을 토큰 갱신 후 재요청
      const response = await axios.request(error.config);
      return response;
    }
    return Promise.reject(error);