Axios interceptor, instance 사용하기

간단한 투두리스트를 만드는데 추가, 수정, 삭제에 모두 통신을 하다보니 그냥 인스턴스로 만드는 게 낫겠다 싶어 수정했다.

인스턴스 사용하기

axios.create 를 통해 만들면 된다.

어떤 토큰같은 인증같은 게 필요 없을때

const baseAPI = (options) => {
  return axios.create({
    baseURL: 'https://abc.com', //공통으로 들어가는 주소,
    ...options,
  });
};

이렇게 작성하면 된다. options엔 내가 넣는 data들이 들어간다. 예를들면,

baseInstance
        .post("/auth/signup", {
          email: email,
          password: password,
        })

이런 정보들을 객체로 묶어주면 options 안에 값이 들어가는 걸 알 수 있다.

header 등 인증(토큰)이 필요할 때

const authAPI = (options) => {
  const token = //토큰 가져오기
  return axios.create({
    baseURL: 'https://abc.com', //공통으로 들어가는 주소,
    headers: {
      Authorization: `Bearer ${token}`,
    },
    ...options,
  });
};

문제

이렇게 해주면 됐겠지 ~ 하고 썼는데, 여기서 문제가 생겼다.
처음 페이지를 로딩할 때 todolist 적어 놓은 친구들을 get으로 가져오는데, 안불러와진다..!
새로고침을 하니 그제서야 불러와졌다.

왜일까 생각해보니, axios를 쓸 때 token을 가져오는 시점이 더 늦기 때문이다.
instance로 가져올 때가 돼서야 token을 정의해서 가져오게 되니, get이 제대로 작동하지 않아 첫 로딩에 에러가 발생했던 것이다.

이 때문에 인터셉터를 쓸 수밖에 없었다.

then, catch 처리가 되기 전에 응답을 가로채는 인터셉터

중간에 가로챌 수 있기 때문에 axios 요청을 하는 중간에 token이 있으면 token을 넣는 작업을 해준다.
그래서 위에 정의한 authAPI는 다음과 같이 수정했다.

const authAPI = (options) => {
  const instance = axios.create({
    baseURL: `https://pre-onboarding-selection-task.shop/`,
    ...options,
  });
  interceptors(instance); //인터셉터안에 인스턴스를 매개변수로 넣어준다.
  return instance;
};

그리고 인터셉터 는 다음과 같이 정의했다.

const interceptors = (instance) => { //위에 매개변수로 넣어준 instance
  // 그 instance를 인터셉트 해준다. 내가 요청하는 상황이니 request로 요청한다.
  instance.interceptors.request.use((config) => { 
    const token = window.localStorage.getItem("token");
    config.headers = {
      Authorization: token ? `Bearer ${token}` : null,
    };
    return config;
  });
};

인터셉터 안에 있는 config

자세히는 봐도 잘 모르겠지만,

instance.interceptors.request.use((config) 

이 요청에 있는 config엔 뭐가 찍히나 console을 찍어봤다.

이런 여러 정보들이 있는 객체인데, 원하는대로 headers 안에 Bearer token 내용이 들어가 있는 걸 볼 수 있다.

다음에는 instance나 interceptor를 좀 더 잘 쓸 수 있을 것 같다 😊

참고

💻 API 모듈화하기 (feat. axios 인스턴스) + 프로젝트 이슈 해결
(React) Axios 인터셉터 사용법
Axios docs - 인터셉터