[Axios] 엑시오스 Interceptors로 공통 에러 처리하기 (401)

https://axios-http.com/kr/docs/interceptors

Axios에서는 interceptors 기능을 통해

요청을 보내기 전, 응답을 받기 전에 특정 로직을 수행할 수 있습니다.

 

특히 같은 Axios Instance를 사용하는 요청들에 대해

공통적으로 설정할 수 있다는 점이 큰 장점입니다.

 

예를 들어, 인증이 만료된 사용자는 401 에러를 받게 됩니다.

각각 페이지에서 이를 catch 문으로 처리할 수 있지만,

모든 API에 동일한 로직을 반복적으로 작성하는 것은 비효율적이고 번거롭습니다. 🤔

 

이럴 경우 interceptors 기능을 활용하면 효과적으로 관리할 수 있습니다.
함께 알아봅시다. 😀

---

📝 Axios interceptor

https://axios-http.com/kr/docs/interceptors

인터셉터 | Axios Docs

 

⦁소개

Interceptor는 API 요청, 응답을 가로채서 특정 작업을 수행할 수 있습니다.

예시로 다음과 같은 작업을 처리할 때 자주 사용됩니다.

• 요청 보내기 전 헤더 설정
• 응답 받은 후 특정 처리
• 공통 에러 처리 (401, 500 등)
• 인증 토큰 갱신
• 요청 또는 응답 로깅

 

⦁소스코드 구조

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: `${process.env.NEXT_PUBLIC_API_URL}/api`,
});

// 요청 인터셉터 추가하기
axiosInstance.interceptors.request.use(
  function (config) {
    // 요청이 전달되기 전에 작업 수행
    return config;
  },
  function (error) {
    // 요청 오류가 있는 작업 수행
    return Promise.reject(error);
  },
);

// 응답 인터셉터 추가하기
axiosInstance.interceptors.response.use(
  function (response) {
    // 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 데이터가 있는 작업 수행
    return response;
  },
  function (error) {
    // 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 오류가 있는 작업 수행
    return Promise.reject(error);
  },
);

export default axiosInstance;

공식 문서에 있는 샘플 코드만으로도 손쉽게 코드의 틀을 잡을 수 있습니다.

 

 

⦁401 에러 처리 예시

axiosInstance.interceptors.response.use(
    response => {
      return response;
    },
    error => {
      /* 응답 code: 401 - 로그인 페이지 이동 */
      if (error.response.status === 401) {
          // cookie or 로컬 스토리지 토큰 제거

          // Authorization 헤더 초기화
          axiosInstance.defaults.headers.common['Authorization'] = '';

          // 로그인 페이지로 리디렉션
          window.location.href = '/login';
        }
      }
      return Promise.reject(error);
    },
);

위와 같은 방식으로 API의 응답 코드가 401일 때 동작할 코드를 공통적으로 설정할 수 있습니다.

해당 로직은 예시일 뿐, 프로젝트 상황에 맞게 잘 작성해 주세요 👍

 

 

⦁setAxiosInterceptors ( 제가 작명한 함수입니다. )

const setAxiosInterceptors = axiosInstance => {
  axiosInstance.interceptors.response.use(
    response => {
      return response;
    },
    error => {
      /* 응답 code: 401 - 로그인 페이지 이동 */
      if (error.response.status === 401) {
        // cookie or 로컬 스토리지 토큰 제거

        // Authorization 헤더 초기화
        axiosInstance.defaults.headers.common['Authorization'] = '';

        // 로그인 페이지로 리디렉션
        window.location.href = '/login';
      }
      return Promise.reject(error);
    },
  );
};

export default setAxiosInterceptors;

 

 

⦁setAxiosInterceptors 적용하기

import axios from 'axios';
import setAxiosInterceptors from '@/api/setAxiosInterceptors';

const axiosInstance = axios.create({
  baseURL: `${process.env.NEXT_PUBLIC_API_URL}/api`,
});

setAxiosInterceptors(axiosInstance); // 이 부분 !

export default axiosInstance;

 

저희 프로젝트에서는 Axios Instance를 5개 정도 사용하고 있기 때문에 interceptors를 등록해 주는 부분은 함수로 빼서 구현했습니다.

 

이렇게 하면 변경사항이 생겨도 코드를 5부분 고치지 않아도 되고 setAxiosInterceptors에서만 코드를 수정하면 됩니다. 😎

 

---

---

 

 

참고 문헌 : 

https://stackoverflow.com/questions/47216452/how-to-handle-401-authentication-error-in-axios-and-react