[React] Axios 인스턴스 - 헤더에 acessToken 넣기

Axios 인스턴스

axios.create([config])

axios.create로 사용자 지정 config로 새로운 Axios 인스턴스를 만들수 있다.

 

🏴 axios.create 사용 방법

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

 

baseURL로 기본 URL을 설정해주고,

header에 요청 헤더를 작성할 수 있다.

 

매 번 요청을 보낼 때 마다 accessToken을 헤더에 매 번 붙이게 되면 반복되는 코드가 생기고, 번거롭기 때문에 axios instance를 설정함으로써 해결하려고 한다.

 

---

💡 프로젝트에 적용

 

src 폴더 안에 api 폴더를 생성하고, axiosInstance.js 파일을 생성해주었다.

 

src > api > axiosInstance.js

---

1️⃣ axios instance 생성

import axios from "axios";

// Axios 인스턴스 생성
const axiosInstance = axios.create({
  baseURL: "", // 기본 URL
  headers: {
    Accept: "*/*",
    "Content-Type": "application/json",
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Credentials": "true",
  },
});

// request 인터셉터를 설정하여 요청을 보내기 전에 토큰을 추가
axiosInstance.interceptors.request.use(
  (config) => {
    const accessToken = localStorage.getItem("accessToken"); // 로컬 스토리지에서 accessToken을 가져옴
    if (accessToken) {
      config.headers.Authorization = `Bearer ${accessToken}`; // Authorization 헤더에 토큰을 추가
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default axiosInstance;

 

axios.create를 이용해서, axios 인스턴스를 생성하고, 기본 URL과 헤더를 지정해주었다.

 

request Interceptors를 사용해 요청을 보내기 전에 토큰을 추가해준다. 로컬 스토리지에서 accessToken을 가져오고 accessToken을 성공적으로 가져왔다면,Authorization 헤더에 토큰을 추가해준다. 

 

localStorage.setItem("accessToken", response.data.accessToken);

 

현재 로컬스토리지에는 localstorage.setItem으로 accessToken이 저장되어있는 상태이다.

 

2️⃣ 다른 컴포넌트에서 axios instance 사용

 

import 

import axiosInstance from "../api/axiosInstance";

 

만들어둔 axiosInstance를 import해서 사용한다.

 

[post 사용 예시]

try {
      const response = await axiosInstance.post(`/url`, data);
      console.log(response.data);
    } catch (error) {
      console.error(error);

 

 

[get 사용 예시]

try {
      const response = await axiosInstance.get(`/url`);
      console.log(response.data);
    } catch (error) {
        console.error(error);
    }

---

📌 참고 링크

Axios 인스턴스 | Axios Docs

 

axios instance 만들기