Axios Interceptor로 Request Header에 토큰 넣어주기

프로젝트를 진행하며 로그인처럼 AccessToken이 필요없는 요청을 제외하고 모든 요청에 대해 AccessToken을 Header에 담아 보내야했다. 이를 위해 axiosInstance를 따로 만들어서 사용하는 방법을 사용했었다.

const 헤더넣은Instance = axios.create({
  baseURL: process.env.SERVER_URL,
  headers: {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${getToken('accessToken')}`,
  },
});

const 헤더없는Instance = axios.create({
  baseURL: process.env.SERVER_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

위 코드처럼 불필요하게 인스턴스를 하나 더 만들었고 개발하며 토큰에 대한 수정 사항이 생기면 인스턴스를 갈아끼우는 불편한 경험을 했다. 이를 해결하기 위해 Interceptor를 활용해 서버로 가는 요청에 토큰을 넣어주는 방식으로 수정했다.

Interceptor

인터셉터는 클라이언트와 서버 사이에서 요청을 가로채 처리를 하는 역할을 한다.

우선 기존과 동일한 axios Instance를 만들어준다.

const axiosInstance = axios.create({
	baseURL: process.env.SERVER_URL
});

그 다음 로컬스토리지에 저장되어 있는 accessToken을 Header에 담아주는 interceptor를 만들어준다.

const tokenInterceptor = (config) => {
  const accessToken = localStorage.getItem('AccessToken');
  if (accessToken) {
    config.headers.Authorization = `Bearer ${accessToken}`;
  }
  return config;
};

생성한 interceptor를 axios Instance에 할당해준다.

axiosInstance.interceptors.request.use(addAccessToken, (err) => {
  return Promise.reject(err);
});

이렇게 인터셉터를 통해 API 요청이 서버로 도달하기 전에 요청을 가로채 특정 요구사항을 처리할 수 있다.