React JWT로 로그인 구현

import axios from "axios";
import { API_ENDPOINT } from "./server";
import Cookies from "js-cookie";


const instance = axios.create({
    baseURL: API_ENDPOINT,
    headers: { "Content-type": "application/json" },
});

// 인터셉터를 사용하여 요청에 토큰을 추가
instance.interceptors.request.use(
    config => {
        const token = Cookies.get("access");
        if (token) {
            config.headers['Authorization'] = `Bearer ${token}`;
        }
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

// 인터셉터로 리스폰이 401이면 도중에 refresh
instance.interceptors.response.use(

    // response가 정상이면 response 리턴
    (response) => response,  
    async (error) => {          
        const originalRequest = error.config;
        const status = error.response?.status;

        // response error 401(권한 문제)면서 Cookie에 refresh 가 있다면
        // refreshAuthToken 함수 실행
        if (status === 401 && Cookies.get('refresh')) {
            try {
                
                await refreshAuthToken();
                return instance(originalRequest);
            } catch (error) {
                console.error('토큰 갱신 실패:', error);
                return Promise.reject(error);
            }
        }
        return Promise.reject(error);
    }
);

// 토큰 갱신 함수
async function refreshAuthToken() {
    try {
        // 쿠키에서 refresh 가져와서 token/refresh API로 토큰 갱신 요청
        const refresh = Cookies.get('refresh');
        const response = await instance.post('/khis/account/token/refresh/', { refresh });

        // 우리 서버는 access, refresh 둘 다 줘서 둘 다 새로 갱신
        Cookies.set('access', response.data.access);
        Cookies.set('refresh', response.data.refresh);
    } catch (error) {
        console.error('토큰 갱신 에러:', error);

        // 갱신 에러 시 쿠키에서 토큰 전부 제거
        Cookies.remove('access');
        Cookies.remove('refresh');
        throw error;
    }
}