axios interceptor를 이용해서 headers 설정하기

평소에 나는 axios.create를 이용해 axios instance를 만들어서 api를 모듈화했다.

아래처럼 구현하곤 했다.

// client.ts
const token = localStorage.getItem(TOKEN);

const client = axios.create({
  baseURL: process.env.SERVER,
  headers: {
    Authorization: `Bearer ${JSON.parse(token)}`,
  }
});

// apis.ts

import client from "./client";

const writePost = async (payload: PostPayload) => {
  const response = await client.post<PostResponse>(WRITE_POST_URL, payload);
  return response.data;
};

const postAPI = {
  writePost,
};

내가 잘못해서 그런 것일 수도 있지만, 여기서 내가 느낀 문제점은 로그인을 한 직후 토큰이 client의 headers에 제대로 들어가지 않는다는 것이다.

이런 불확실성(?)을 해결하기 위해서 아래처럼 함수를 만들고 interceptor를 사용해보았다.

// client.ts
...

export const setClientHeaders = (token: string) => {
  client.interceptors.request.use(function (config) {
    config.headers.Authorization = `Bearer ${token}`;
    return config;
  });
};

login 요청 혹은 로컬스토리지에서 토큰을 가져오는 과정이 정상적으로 끝나고 나서 setClientHeaders 함수를 실행하면 된다.