axios interceptors

원래 각 api마다 headers에 accessToken을 일일히 작성해주었는데,

스마일게이트에서 코드 리뷰 피드백을 받던 중 axios의 interceptors를 알게 되어서 interceptors를 사용하여 axios 코드를 리팩토링하였다.

 

interceptors를 사용하면 공통적으로 넣을 내용을 한꺼번에 적용할 수 있으므로 코드의 양을 줄일 수 있다.

 

 

- interceptors를 활용하여 변경한 코드

import axios from "axios";

const baseURL = process.env.REACT_APP_BASE_URL;
const accessToken = localStorage.getItem("accessToken");

const clientApi = axios.create({
  baseURL,
});

clientApi.interceptors.request.use((config) => {
  config.headers.Authorization = "Bearer " + accessToken;
  return config;
});