Axios 인스턴스 생성

// 기본 구조
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

axios 인스턴스 = 커스텀 axios 인스턴스

인스턴스를 사용하면 api 요청 시 반복되는 코드(URL, headers 등)를 한 곳에 정리가 가능해서 코드 가독성과 일관성을 유지할 수 있음.

하지만 주의할 점이 있는데 바로 Authorization임.

Authorization은 자동 반영되지 않음

Authorization 헤더는 인스턴스를 생성한 시점의 토큰 값만 기억합니다.
그래서 추가 요청이 있을 경우에는 헤더를 갱신하지 않아 null이 되는 문제가 발생할 수 있다.

axiosInstance는 한 번 생성하면 내부 headers는 고정

그래서 로그인 같은 경우, 로그인 직후 localStorage에 새로운 토큰이 저장되는데
axiosInstance는 변경된 것을 몰라서 추가 요청의 Authorization: null 또는 없음이 됨

인터셉터를 사용하자

요청마다 Authorization을 최신 상태로 유지하기하기 위해 인터셉터를 사용해서 자동으로 넣어 문제를 해결해야함.

// 요청 인터셉터 추가하기
api.interceptors.request.use((request) => {
  // 요청이 전달되기 전에 작업 수행
  request.headers.Authorization = `Bearer ${localStorage.getItem("access_token")}`;

  return request;
});