[React] axios API 통신시 header에 JWT token 보내기

로그인 기능을 구현할 때 jwt를 많이 사용하실 겁니다. 그러면 react에서는 어떻게 해야할까요?

JWT(Json Web Token) 란?

Json 포맷을 이용하여 사용자에 대한 속성을 저장하는 Claim 기반의 Web Token

 

axios 인스턴스 생성

로그인을 할 때 api에서 넘겨주는 access token을 cookie에 저장하는 로직이 선행되어야 합니다.
로그인 후 cookie에 저장되는 access token을 가져와서 axios 통신시 header에 넣어주는 코드입니다.

 

import Cookies from "js-cookie";
import axios from "axios";

/**
 * @description Axios 인스턴스를 생성
 * 목적 : axios 요청 시 header에 token을 보내기 위함
 */

const instance = axios.create({
  baseURL: process.env.REACT_APP_BASE_URL, // 서버 포트 ex) http://localhost:8080/
});

instance.interceptors.request.use(
  (config) => {
    const accessToken = Cookies.get("accessToken"); // Cookies를 이용해 accessToken을 가져옵니다.

    try {
      if (accessToken) {
        config.headers["Authorization"] = `Bearer ${accessToken}`;
      }
      return config;
    } catch (err) {
      console.error("[_axios.interceptors.request] config : " + err.message);
    }
    return config;
  },
  (error) => {
    // 요청 에러 직전 호출됩니다.
    return Promise.reject(error);
  }
);

export default instance;

위 코드처럼 axios 인스턴스를 생성합니다. 사용하는 부분에서는 해당 인스턴스를 import 받아서 axios를 사용하는 부분에서 사용하시면 됩니다.

 

코드 적용

const { data } = await request.get(url);

// 전체 코드
import request from '@/utils/api';

/**
 * @description 게시글 목록 가져오기
 * 
 */
const getBoardList = async () => {
    const url = 'board/list';

    const { data } = await request.get(url);

    return data;
};

export {getBoardList} ;