[React.js] axios instance.interceptor를 이용한 미들처리

interceptor

interceptor 기능을 사용하면 response, request 등 axios을 활용한 통신 중간에 내가 지정한 처리를 하도록 만들수 있다. 전문용어로 미들웨어라고 부르면 이해가 빠르겠다.

이 interceptor 기능을 사용하면 아래 코드 중 가장 아래와 같이 req.headers.Authorization을 localStorage.getItem('token')을 하며 리퀘스트를 보내도록 만들 수 있다. 이렇게 하면 코드 상에서 중복되는 토큰 부분이 사라진다.

이 이외에도 인터셉터를 활용한 기능들이 많이 있다. 예를들면 이전 axios 포스팅에서 말했던 fetch문에서의 res와 axios의 res가 달라서 헷갈릴 때를 대비해 res를 res.data로 만들어서 return 해줄 수도 있다.

우선, 지금 가지고 놀고 있는 to-do-list 프로젝트에서는 인터셉터 기능으로 토큰만 자동으로 심기도록 만들어 보았다. 코드가 점점 깔끔해지고 이뻐지는 느낌이라 좋긴하다!!

얼른!!! Redux사용해서 props를 없애버리고 싶다 ㅎㅎ🔥

import axios from 'axios';

const baseURL = process.env.REACT_APP_BASE_URL;

export const URL = {
  LOGIN: '/auth/signin',
  SIGNUP: '/auth/signup',
};

export const http = axios.create({
  baseURL,
  headers: { 'Content-Type': 'application/json' },
  timeout: 1000,
});

http.interceptors.request.use(req => {
  if (req.headers) {
    req.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  }

  return req;
});