Couch Coding ( 카우치 코딩 ) - 글로벌 axios 기본(defaults) 설정

이번 글은 axios를 모듈화하는 방법에 대해서 알아보자 

 

axios의 default를 설정해주기 위해 axiosInstance라는 파일내에서 관리하도록 하자 

 

 

우리 팀은 위 처럼 common폴더에서 관리를 하기로 했다. 

 

이제 코드를 통해 살펴보자 

 

// axiosInstance.js

import axios from 'axios';

const axiosInstance = axios.create({ baseURL: 'https://api.example.com' });

axiosInstance.defaults.headers.common['Authorization'] = 'FIREBASE AUTH TOKEN';

export default axiosInstance;

 

위 코드는 멘토님이 처음 주신 예시 코드이다. 

 

axios.create()이 핵심이다 !  
위와 같이 axios의 create() 내장 함수를 이용하면 통신할 때 필요한 baseURL, 쿼리, 헤더, 바디 등등 여러 데이터를 함께 보낼 수 있다.

하지만 우리 프로젝트는 위 코드와 짜임을 조금 다르게 가져가야했다. 

 

// AuthProvider.jsx

useEffect(() => {
    auth.onAuthStateChanged(async (firebaseUser) => {
      if (firebaseUser) {
        try {
          const token = await firebaseUser.getIdToken();
          defaultHeaders.Authorization = `Bearer ${token}`;

          const res = await axios({
            method: 'GET',
            url: '/members/me',
            withCredentials: true,
            headers: defaultHeaders,
          });

          if (res.status === 200) {
            const user = res;
            setUser(user);
          }
        } catch (e) {
          console.log('로그인 된 회원 없음 ');
          setRegisterFormOpen(true);
        }
      } else {
        setUser(null);
      }
    });
  }, []);

 

위 코드는 현재 로그인을 담당하는 컴포넌트이다 

useEffect 안에서 firebaseUser ( 회원 )이 클라이언트에서 인증이 되었다면 백엔드 서버로 인증을 요청하는 구조이다   

그렇기 때문에 항상 회원의 인증이 되었는지 확인하는 auth.onAuthStateChanged(async (firebaseUser) => {   와 같은 코드가

있어야한다 . 

 

이 처럼 인증할 때 마다 회원이 인증되었는지 절차를 거치는 것이 아니라 

axiosInstance에서 인증을 한번 하고나면 회원의 토큰이 default로 들어가게 하기 위해서 아래처럼 코드를 변경해야 했다. 

 

//axiosInstance 

const axiosInstance = axios.create({
  headers: {
    Authorization: '',
  },
});

axiosInstance.interceptors.request.use(
  (config) => {
    config.headers['Authorization'] = localStorage.getItem('token');
    return config;
  },
  (err) => {
    return Promise.reject(err);
  },
);

 

axiosInstance를 실행하기 전에 요청을 인터셉트하여 token을 header에 넣어주고 로그인 컴포넌트에서는 token을 생성하고 

로컬스토리지에 보관해 놓았다가 axios 요청을 하기 전에 intercept 하여 토큰을 헤더에 담아 요청을 보내는 구조로 변경했다. 

 

위처럼 create로 변경한 이후에는 axios로 요청을 보낼 때 마다 헤더를 설정해 줄 필요가 없어서 편리하게 사용이 가능하다 

모듈화의 중요성을 한번 더 느끼는 과정이었다 !

 

reference 

https://yamoo9.github.io/axios/guide/config-defaults.html

Config 기본 설정 | Axios 러닝 가이드

 

https://yamoo9.github.io/axios/guide/interceptors.html

인터셉터 | Axios 러닝 가이드