axios interceptor 구현하기

Why?

• 사용자가 인증이 필요한 페이지에 들어가려고 할 때 로그인을 한 다음 서버에서 jwt-token을 redux-persist에 저장해서 useSelector로 jwt-token을 받아서 그 jwt-token이 유효한 경우에만 인증이 필요한 페이지에 들어가게 한다.
• 하지만 클라이언트가 인증이 필요한 페이지에 들어가는 것과 별개로, 인증이 필요한 서버로 데이터를 보내거나 조작하는 API를 호출할 때 보안을 위해 interceptor를 사용해서 HTTP Authorizaition 요청 헤더에 jwt-token을 보내서 서버 측 해당 API에 요청을 하기 전에 서버 측의 미들웨어에서 이를 확인한 후 검증이 완료되면 API에 요청을 하게 한다.

interceptor 구현

• utils 폴더에 api.ts 파일을 생성하자.

utils/api.js

• 아래 코드를 보면 API에 요청하기 직전에 Authorization 헤더에 토큰을 넣었다.

import axios from 'axios';
import store from "../redux/configStore";
import {jwtUtils} from "./jwtUtils";

const instance = axios.create({
  // baseURL: process.env.NODE_ENV === 'production' ? '' : 'https://api.eastflag.co.kr'
  baseURL: process.env.NODE_ENV === 'production' ? '' : ''
})

/**
 1. 요청 인터셉터
 2개의 콜백 함수를 받습니다.
 */
instance.interceptors.request.use(
  (config) => {
    // HTTP Authorization 요청 헤더에 jwt-token을 넣음
    // 서버측 미들웨어에서 이를 확인하고 검증한 후 해당 API에 요청함.
    const token = store.getState().Auth.token;
    try {
      if (token && jwtUtils.isAuth(token)) {
        config.headers.Authorization = `Bearer ${token}`;
      }

      return config;
    } catch (err) {
      console.error('[_axios.interceptors.request] config : ' + err);
    }
    return config;
  },
  (error) => {
    // 요청 에러 직전 호출됩니다.
    return Promise.reject(error);
  }
);

/**
 2. 응답 인터셉터
 2개의 콜백 함수를 받습니다.
 */
instance.interceptors.response.use(
  (response) => {
    /*
        http status가 200인 경우
        응답 성공 직전 호출됩니다.
        .then() 으로 이어집니다.
    */

    return response;
  },

  (error) => {
    /*
        http status가 200이 아닌 경우
        응답 에러 직전 호출됩니다.
        .catch() 으로 이어집니다.
    */
    return Promise.reject(error);
  }
);

export default instance;

• 해당 interceptor를 인증이 필요한 API를 호출하는 게시판 쓰기, 수정, 삭제와 댓글 쓰기, 수정, 삭제에서 불러와서 사용하면 된다!
• 만약 리액트 프로젝트에서 사용하면 아래처럼 사용할 수 있다!

import api from "../../utils/api";

...

const addBoard = async (board) => {
    const res = await api.post('/api/board', board);
    console.log(res);
}