평소에 나는 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
함수를 실행하면 된다.