[Axios] Axios 인터셉터 적용하기

인터셉터(Interceptors)란? then 또는 catch로 처리되기 전에 요청과 응답을 가로챌 수 있다.

 

Axios 인터셉터를 적용하려는 이유❓

토이 프로젝트를 진행하면서 서버에 토큰 인증을 필요로 하는 API 요청을 할때마다 HTTP Authorization 요청 헤더에 토큰을 넣어줘야하고 401(Unauthorized) 에러가 서버로부터 들어오면 토큰을 갱신해준 후 재요청을 보내는 과정을 한 곳에서 모두 처리하여 중복 코드를 제거하고 유지보수성을 향상시키기 위해 Axios 인터셉터를 적용하기로 했다.

사용자 지정 config로 새로운 Axios 인스턴스를 생성하여 사용하니 더욱 편리했다. (baseURL, timeout 설정) 

 

적용하는 과정

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);
  }
);

 

🙇🏻 적용 후 전체 코드

axios_interceptor.js

import URL from './server_url.js';
import { getToken, isTokenExpired, tokenRefresh } from './token.js';

const instance = axios.create({
  baseURL: URL,
  timeout: 1000,
});

instance.interceptors.request.use(
  (config) => {
    const accessToken = getToken();

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

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

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

    return response;
  },
  async (error) => {
    if (error.response?.status === 401) {
      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);
  }
);

export default instance;

 

서버에 토큰 인증을 필요로 하는 API 요청을 하는 예시(기존 코드 -> 적용 후 코드)

import instance from '../../modules/axios_interceptor.js';

// 기존 코드
// async function getUser() {
//   try {
//     const response = await axios.get(`${URL}/api/user`, {
//       headers: {
//         'Content-Type': 'application/json',
//         Authorization: `Bearer ${accessToken}`,
//       },
//     });
//     console.log(response);
//   } catch (error) {
//     console.log(error);
//   }
// }

// 적용 후 코드
async function getUser() {
  try {
    // 위에서 지정한 baseURL 뒤에 다음 URL이 붙는다.
    const response = await instance.get('/api/user');
    console.log(response);
  } catch (error) {
    console.log(error);
  }
}

 

📚 참고한 사이트

인터셉터 | Axios Docs

axios interceptor로 401 처리하기