인프런 커뮤니티 질문&답변

안녕하세요.
access Token 정보 만료 후에 서버에서 보내는 메시지가 401 메시지로 옵니다.
그래서인지 jwtUtil.js 파일에서 처리를 못하는 문제가 있는 것이 맞을까요?

responseFail 을 아래와 같이 수정하는게 맞는지 무엇을 놓치고 있는 것인지 모르겠습니다.

http://localhost:3000/todo/list 를 10분 이상 경과후 실행했을 때 에러 메시지를 출력했었습니다.

import axios from "axios";
import {getCookie, setCookie} from "./cookieUtil";
import {API_SERVER_HOST} from "../api/hostApi";

const jwtAxios = axios.create()

const refreshJWT = async (accessToken, refreshToken) => {

    const host = API_SERVER_HOST

    const header = {headers: {"Authorization": `Bearer ${accessToken}`}}

    const res = await axios.get(`${host}/api/member/refresh?refreshToken=${refreshToken}`, header)

    console.log("----------------------")
    console.log(res.data)

    return res.data
}


//before request
const beforeReq = (config) => {
    console.log("before request.............")

    const memberInfo = getCookie("member")

    if (!memberInfo) {
        console.log("Member NOT FOUND")
        return Promise.reject(
            {
                response:
                    {
                        data:
                            {error: "REQUIRE_LOGIN"}
                    }
            }
        )
    }

    const {accessToken} = memberInfo

    // Authorization 헤더 처리
    config.headers.Authorization = `Bearer ${accessToken}`

    return config
}

//fail request
const requestFail = (err) => {
    console.log("request error............")
    return Promise.reject(err)
}

//before return response
const beforeRes = async (res) => {
    console.log("before return response...........")

    console.log(res)

    //'ERROR_ACCESS_TOKEN'
    const data = res.data

    if (data && data.error === 'ERROR_ACCESS_TOKEN') {

        const memberCookieValue = getCookie("member")

        const result = await refreshJWT(memberCookieValue.accessToken, memberCookieValue.refreshToken)
        console.log("refreshJWT RESULT", result)

        memberCookieValue.accessToken = result.accessToken
        memberCookieValue.refreshToken = result.refreshToken

        setCookie("member", JSON.stringify(memberCookieValue), 1)

        //원래의 호출
        const originalRequest = res.config
        originalRequest.headers.Authorization = `Bearer ${result.accessToken}`

        return await axios(originalRequest)

    }

    return res
}


//fail response
const responseFail = async (err) => {
    console.log("response fail error.............")
    console.log(err)

    const originalRequest = err.config;

    // 토큰 만료로 인한 401 응답이라면 → refresh 시도
    if (
        err.response &&
        err.response.status === 401 &&
        !originalRequest._retry // 무한 루프 방지
    ) {
        originalRequest._retry = true;

        const memberCookieValue = getCookie("member");

        try {
            const result = await refreshJWT(
                memberCookieValue.accessToken,
                memberCookieValue.refreshToken
            );

            // 토큰 저장
            memberCookieValue.accessToken = result.accessToken;
            memberCookieValue.refreshToken = result.refreshToken;
            setCookie("member", JSON.stringify(memberCookieValue), 1);

            // 원래 요청 재시도
            originalRequest.headers.Authorization = `Bearer ${result.accessToken}`;
            return await axios(originalRequest);

        } catch (refreshError) {
            console.error("Refresh 실패, 로그아웃 처리 필요");
            // 로그아웃 로직 연결 가능
            localStorage.removeItem("token");
            return Promise.reject(refreshError);
        }
    }

    return Promise.reject(err);
}

jwtAxios.interceptors.request.use(beforeReq, requestFail)

jwtAxios.interceptors.response.use(beforeRes, responseFail)

export default jwtAxios