웹 애플리케이션을 개발하다보면 REST API를 호출할 때 매번 인증 토큰을 추가하거나 특정 헤더를 설정해야 하는 경우가 있습니다. 이런 중복된 작업을 피하기 위해 인터셉터(interceptor)를 사용할 수 있습니다. 이번 글에서는 타입스크립트에서 Axios를 사용하면서 인터셉터를 활용하는 방법에 대해 알아보겠습니다.

Axios와 함께 인터셉터 사용하기

Axios는 인기 있는 HTTP 클라이언트 라이브러리로, 브라우저 및 Node.js에서 모두 사용할 수 있습니다. Interceptor는 클라이언트 요청이나 응답을 가로채어 수정할 수 있게 해주는 기능입니다.

이 예시에서는 Axios에서 인터셉터를 사용하여 모든 요청에 인증 토큰을 추가하는 방법을 살펴보겠습니다.

import axios, { AxiosRequestConfig } from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Content-Type': 'application/json',
  },
});

api.interceptors.request.use((config: AxiosRequestConfig) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, (error) => {
  return Promise.reject(error);
});

위의 코드에서 api.interceptors.request.use 메서드를 사용하여 모든 요청에 토큰을 추가하는 인터셉터를 설정했습니다. localStorage.getItem('token')을 사용하여 저장된 토큰을 가져와 요청 헤더에 추가합니다.

이제 api를 사용하여 REST API를 호출할 때마다 해당 토큰이 자동으로 헤더에 추가됩니다.

결론

인터셉터를 사용하면 REST API 호출 시 발생하는 공통 작업들을 효율적으로 처리할 수 있습니다. Axios와 같은 라이브러리에서 제공하는 인터셉터 기능을 적절히 활용하여 코드를 깔끔하게 유지하고 중복을 최소화할 수 있습니다.

참고 자료:

• Axios 공식 문서
• MDN Web Docs - Intercepting HTTP requests