무한 리프레시 현상

위리브 프로젝트 - 무한 리프레시 현상

위리브 프로젝트를 진행하면서 JWT 인증 로직을 구현하던 중

무한 리프레시 현상을 경험

• 문제 상황
  1. 사용자가 보호된 페이지에 접근
  2. 엑세스 토큰 만료로 인해 요청이 401 Unauthorized 발생
  3. 인터셉터에서 리프레시 토큰으로 새로운 액세스 토큰을 요청
  4. 이 리프레시 요청 조차 401 응답으로 받음 (문제 발생)
  5. 인터셉터는 다시 리프레시 요청 시도 → 또 401 (무한 반복)

• 원인
  • 리프레시 요청에도 인증이 필요하도록 잘못 구성
  • 인터셉터 안에서 또 리프레시 요청을 보내게 되는 무한 루프가 시작

• 해결 방법
  1. 리프레시 요청에는 인증 헤더를 제거

     axios.post('/auth/refresh', {}, {
       headers: {
         Authorization: '',
       },
     });

     • 혹은 별도의 Axios 인스턴스를 만들어 리프레시 요청만 분리

       const refreshAxios = axios.create();
       refreshAxios.post('/auth/refresh'); 

  2. 리프레시 실패 시 루프를 막는 로직 추가

     if (error.config.url.includes('/auth/refresh')) {
       // 리프레시 자체가 실패했다면 로그인 페이지로 보내기
       logout();
       router.push('/login');
       return Promise.reject(error);
     }

처음에 해당 이슈를 겪었을때 멘붕이 말이 아니였음.

페이지는 계속 새로고침되고 서버는 요청을 미친듯이 보내고…

인터셉터 설계는 신중하게 !