[React/TypeScript] 통합 회원관리 시스템(IAM) 프론트 구현 기록

IAM 백엔드 구현 기록

[Spring Boot] 통합 회원관리 시스템(IAM) 구현 기록

 

• fetch는 코드를 간결하게 작성하기 위해선 오류 처리나 json 파싱 등 래핑 작업이 불가피하여 초기세팅이 좀 더 편하고 번들 사이즈도 axios에 비해 가벼운 ky 사용
• ky에서 지원하는 beforeRequest, beforeError, afterResponse hook을 통해 토큰 관련 로직 처리
• beforeRequest에서 API 요청 헤더에 액세스 토큰 추가
• beforeError에서 API 응답 시 에러 json 매핑 처리 (아래와 같이 커스텀 에러 message를 사용하기 위해)

import { api } from "client.ts";    // api: ky.create()로 만든 요청 래퍼

api.post("/test")
    .catch((error) => alert(error.message));

• afterResponse에서 액세스 토큰이 만료되거나 유효하지 않아 401 Unauthorized 에러가 발생하면 자동으로 재발급 요청을 보내고 성공하면 401 응답을 준 요청을 다시 실행시킴.
• 이때 재발급 요청은 여러 API가 한꺼번에 요청되면 동시다발적으로 일어날 수 있으므로 이미 재발급이 진행중이면 Promise를 블로킹하도록 락 추가

let refreshRequest: Promise<{accessToken: string}> | null = null;

const requestRefresh = (): Promise<{accessToken: string}> => {
    if (!refreshRequest) {
    	requestRefresh = new Promise(
            // 재요청 로직
        );
    }
    
    return refreshRequest;
}

• 재발급 요청은 401로 응답이 와도 afterResponse 훅을 타지 않도록 주의하기