axios 401에서 refresh가 여러 번 호출되는 문제 - Promise 락으로 해결

배경

토큰 만료 시 axios 인터셉터가 401 → refresh → 원래 요청 재시도 흐름으로 동작하고 있었다.

단일 요청일 때는 문제 없었지만, “필터 + 리스트”처럼 동시에 여러 API를 호출하는 페이지에서 토큰이 만료되면, refresh가 여러 번 호출되면서 로그아웃되는 문제가 생겼다.

원인

_retry 플래그는 이 요청(config)만 기준이다.

요청 A: 401 → _retry === false → refresh 호출
요청 B: 401 → _retry === false → 또 refresh 호출

즉, 401 나는 요청이 N개면 refresh도 최대 N번 호출될 수 있다.
refresh 토큰을 1회용으로 쓰는 서버라면, 두 번째 refresh에서 실패 → 클라이언트는 “refresh 실패”로 보고 바로 로그아웃시킨다.

해결

진행 중인 refresh를 하나의 Promise로 공유함.

1. 처음 401: refresh 호출 → 그 Promise를 전역 변수에 저장
2. 이후 401들: 새로 refresh를 부르지 않고, 그 Promise만 await
3. 끝나면 Promise 변수를 다시 null로 초기화

이렇게 하면 동시에 401이 여러 개 와도 실제 refresh 호출은 한 번만 일어난다.