axios interceptor

Why?

• 인증이 필요한 서버로 데이터를 보내거나 조작하는 API를 호출할 때 보안을 위해 interceptor로 요청을 가로챈 후  HTTP Authorizaition 요청 헤더에 jwt-token을 보내서 서버 측 해당 API에 요청을 하기 전에 서버 측의 미들웨어에서 이를 확인한 후 검증이 완료되면 API에 요청을 하게 한다
• 클라이언트가 jwt-token을 저장하는 위치는 매우 많겠지만 아래 예시에서는 localStorage에 있다고 가정하자!!

axios interceptor

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 tokenState = localStorage.getItem("Access-Token");
    try {
      // 직접 만든 jwt를 검증하는 jwtUtills 클래스에서 토큰을 검증하고 헤더에 넣어준다!
      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;

jwtUtils.js

import jwtDecode from "jwt-decode";

export class jwtUtils {
  static isAuth(token) {
    if (!token) {
      return false;
    }
    const decoded = jwtDecode(token);
    if (decoded.exp > new Date().getTime() / 1000) {
      return true;
    } else {
      return false;
    }
  }
  // 토큰의 payload에서 유저 아이디 가지고오기
  static getId(token) {
    const decoded = jwtDecode(token);
    return decoded.user_id;
  }
  // 토큰의 payload에서 유저 이름 가지고오기
  static getUserName(token) {
    const decoded = jwtDecode(token);
    return decoded.user_name;
  }
}