[React.js] axios interceptor로 axios header에 토큰 삽입하기

❓ axios interceptor

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

❗ axios interceptor 써야하는 이유

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

❗ axios interceptor 기능

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

 

✔ 'Interceptors response'는 response를 받은 후 실행되는 기능이다. response가 호출 코드로 다시 전달되기 전에 response 데이터를 수정하거나, 오류를 처리하거나, 정보를 기록하거나, 다른 작업을 수행할 수 있다.

 

---

❗ requet 사용 예제

사용 예제는 실제로 내가 프로젝트에서 사용하고 있는 코드를 가지고와서 예제를 쓰겠다.

나는 axios interceptor를 커스텀 훅으로 사용 하고있다.

import { useCookies } from 'react-cookie';
import axios, {
  AxiosInstance,
  AxiosRequestConfig,
  AxiosRequestHeaders,
} from 'axios';

const useAxiosWithAuth = (): AxiosInstance => {
  const [cookies] = useCookies(['jwt']);
  const axiosInstance = axios.create({
    baseURL: 'http://127.0.0.1:8000/',
  });

  axiosInstance.interceptors.request.use(
    (config: AxiosRequestConfig) => {
      const token = cookies.jwt;
      if (token) {
        config.headers = config.headers || {};
        (
          config.headers as AxiosRequestHeaders
        ).Authorization = `Bearer ${token}`;
      }
      return config;
    },
    (error) => {
      console.error(error);
      return Promise.reject(error);
    }
  );

  return axiosInstance;
};

export default useAxiosWithAuth;

1. 쿠키에서 JWT 토큰의 값을 가져오기 위해 react-cookie 라이브러리에서 useCookies 함수를 가져옴
2. 기본 URL과 쿠키의 JWT 토큰을 포함하는 기본 헤더로 Axios의 인스턴스를 생성하는 'useAxiosWithAuth' 함수를 정의
3. axiosInstance.interceptors.request.use에 전달된 함수는 요청 구성 개체를 인수로 사용하고 JWT 토큰을 포함하는 Authorization 헤더와 함께 수정된 요청 구성 개체를 반환
4. 수정된 request 는 다음 interceptor로 전달되거나 서버에 대한 요청으로 전송
5. interceptor에서 오류가 발생하면 console에 기록되고 오류와 함께 reject

❗ response 사용 예제

import { useCookies } from 'react-cookie';
import axios, { AxiosInstance } from 'axios';
import { useNavigate } from 'react-router-dom';

const useAxiosWithAuth = (): AxiosInstance => {
  const [cookies, setCookie] = useCookies(['jwt']);
  const navigate = useNavigate();

  const axiosInstance = axios.create({
    baseURL: 'http://127.0.0.1:8000/',
    headers: {
      Authorization: `Bearer ${cookies.jwt}`,
    },
  });

  axiosInstance.interceptors.response.use(
    (response) => response,
    (error) => {
      const statusCode = error.response?.status;
      if (statusCode === 401) {
        error.response.statusText = 'Unauthorized';
        error.response.status = 401;
        navigate('/');
      }
      return Promise.reject(error);
    }
  );

  return axiosInstance;
};

export default useAxiosWithAuth;

 

이거는 로직이랄건 없고 그냥 토큰이 만료된 상황을 고려하여 
토큰이 만료되었을 때는 401에러를 출력할테니 401 에러일 때 권한 에러에 대한 에러메시지를 띄워주고
첫화면으로 강제로 이동하게 하는 로직이다.

interceptors response를 활용하면 리프레쉬 토큰도 사용할 수 있을거고 뭐 이런 저런거 많이 사용할 수 있을것이다.

그런 예제는 현재 구현해둔게 없어서 여기까지만 적어두겠다.

 

끝 !