프론트엔드 JWT 토큰 재발급 타이머 구현 (React JS + React Query)

토큰이 만료되었을 경우, 토큰을 재발급하는 기능을 추가 중 아래와 같이 reissue api를 연속적으로 호출하는 오류 상황을 마주하였다.

 

 

 

내가 작성한 기존 로직은 다음과 같다.

1. axios의 interceptors를 통하여 토큰 만료 오류를 감지한다.
2. accessToken을 헤더에, refreshToken을 body에 넣어 reissue api를 호출한다.
    a. 요청이 성공적으로 처리된 경우, 재발급된 토큰을 localStorage에 저장한다.
    b. 그렇지 않은 경우, 다시 로그인하라는 모달을 표시하며, 로그인 페이지로 이동하게 한다.

 

 

 

문제원인 파악

네트워크 탭에 들어가 요청을 자세히 살펴봤다.

 

가장 먼저 메인 페이지에서 토큰이 필요한 API인 user/ticket 요청에서 에러가 발생하였다.

보다시피 토큰 만료에 따른 오류임을 알 수 있다. 

 

 

앞에서 토큰 만료 에러가 발생했으므로 user/reissue api가 호출되는 것까지는 정상적이다.

reissue 요청을 확인해보니 Authorization도 잘 넣었고, payload에도 문제 없는데 401 Unauthorized 상태 코드가 뜬다.

 

 

 

 

401 오류라면 토큰 관련 오류인데 이미 만료된 acesssToken을 헤더에 넣으면 안 되는 것인가?

 

 

 

 

백엔드 팀원에게 토큰 만료 시간을 60초로 설정해달라고 부탁한 후 테스트해보니 바로 발급된 access 토큰을 헤더에 담아 요청을 보내면 알맞게 응답이 오고, 만료된 토큰을 담은 경우에는 401 에러가 발생한다.

이로써 401 토큰 만료 오류로 토큰 재발급 api를 호출했는데, 토큰 재발급 요청에 대하여 다시 401 오류가 발생하여 요청이 무한 루프로 이루졌음을 알 수 있다.

 

 

 

 

확인 차 백엔드 팀원에게 다시 물어보니, 토큰이 만료되고나서 토큰을 재발급하는 것이 아니라, 토큰이 만료되기 전에 먼저 토큰을 재발급해야 하는 것이었다. (토큰 재발급 과정에 관한 소통의 오류가 있었던 것이다.)

당연히 토큰 만료 후에 처리하는 것이라 생각하여 이 과정에 대하여 자세히 이야기를 나누지 못했다.

 

 

 

구현

그렇다면 !

토큰 발급 시간을 측정한 후, 만료 시간 전에 자동으로 재발급할 수 있도록 하는 로직을 작성해야 한다.

 

간단하게 로직을 작성해보면 다음과 같다.

1. 로그인 시 setTimeout()을 통하여 토큰 만료 타이머를 작동한다.
2. 주어진 시간이 지나면 reissue api를 호출하여 토큰을 재발급한다.

 

그렇다면 새로고침을 했을 경우에는 어떻게 해야 할까?

새로고침을 하면 타이머가 초기화된다.
기존 타이머의 잔여 시간(ms)은 토큰 발급 일시로부터 경과된 시간 (=토큰 발급 일시와 현재의 차이, ms)을 토큰 만료 시간에서 뺀 값이다.
토큰 발급 일시는 localStorage에 저장해야 한다.

REMAIN_TIME(ms) = (TOKEN_EXPIRED_TIME - (TOKEN_ISSUED_DATE - CURRENT_DATE))

1. 로그인 시 토큰 발급 시간인 tokenDate를 localStorage에 저장한다.
2. 기존 타이머의 잔여 시간(REMAIN_TIME)을 구한 후, setTimeout 시간으로 설정한다.

 

setTimeout은 언제, 어디서 실행해야 할까?

이 프로젝트의 경우, setTimeout의 시간이 종료된 후 수행되는 토큰 만료 로직에서 useNavigate hook이 존재하여 Router 안에 있는 컴포넌트에 배치해야 했다.
그래서 Router 내 최상위 레이아웃인 <Layout> 컴포넌트에 setTimeout을 배치하였다.

그리고 로그인/로그아웃/토큰 재발급을 한 경우, 타이머와 토큰 발급 시간 값의 변경이 필요하므로, 토큰 발급 여부를 isTokenIssued 전역 상태로 관리하여, Layout 컴포넌트에서 useEffect를 통하여 isTokenIssued의 상태를 감지하여 타이머와 토큰 발급 시간을 갱신하기로 하였다. 

 

 

 

코드

(data fetch는 react-query를 통하여 이루어진다.)

1. 로그인 성공 후 로직 : 토큰 발급 일시와 여부 할당

    onSuccess: ({ accessToken, refreshToken }) => {
      localStorage.setItem('accessToken', accessToken);
      localStorage.setItem('refreshToken', refreshToken);
      localStorage.setItem('tokenDate', JSON.stringify(new Date()));
      setIsLoggedIn(true);
      setIsTokenIssued(true);
    },

 

2. Layout에서 전역 상태 isTokenIssued 변화 감지

getTimeDifference(tokenDate): 토큰 발급 일시인 tokenDate와 현재 시간과의 차이를 구하여 토큰 발급으로부터 몇 ms가 지났는지 구한다.

remainTime: 토큰 만료 시간(ms)인 TOKEN_EXPIRED_TIME과 getTimeDifference의 차이를 구하여 타이머 시간을 설정한다. (새로고침해도 기존 잔여 시간 유지되도록 한다.)

isTokenIssued가 true라면(토큰이 발급되었다면) 만료 시간이 경과한 후  isTokenIssued를 false로 변경한다. (그래야 토큰을 재발급 받아 isTokenIssued 값을 true로 업데이트하고, 변화된 값을 useEffect가 감지한다.) 그리고 토큰 재발급 api를 호출한다.      

  useEffect(() => {
    const tokenDate = localStorage.getItem('tokenDate');
    if (tokenDate) {
      const remainTime = TOKEN_EXPIRED_TIME - getTimeDifference(tokenDate);
      isTokenIssued &&
        setTimeout(() => {
          setIsTokenIssued(false);
          reissueToken();
        }, remainTime);
    }
  }, [isTokenIssued]);

 

3. reissueToken 로직

요청 성공시 로직은 로그인과 거의 동일하다.

에러 발생시, refreshToken 또한 만료되었음을 뜻하므로 로그아웃 로직을 실행한다.

    onSuccess: ({ accessToken, refreshToken }) => {
      localStorage.setItem('accessToken', accessToken);
      localStorage.setItem('refreshToken', refreshToken);
      localStorage.setItem('tokenDate', JSON.stringify(new Date()));
      setIsTokenIssued(true);
    },
    onError: () => {
      pathname !== '/login' &&
        open({
          title: '다시 로그인해주세요',
          option: {
            type: 'CONFIRM',
            confirmEvent: () => {
              logout();
            },
          },
        });
    },

 

 

구현 결과

토큰 만료 시간을 짧게 하여 테스트해본 결과 아래와 같이 자동으로 토큰 재발급 API가 호출된다.

 

 

 

마무리

처음 토큰 재발급 로직을 구현할 때, 백엔드 팀과의 소통 부족으로 인해 토큰 재발급 시점을 정확히 파악하지 못했다. 앞으로 백엔드 기능 작성시 여러 시나리오에 관하여 함께 충분히 논의해봐야겠다.

그리고 토큰이 만료되기 전에 미리 재발급하는 로직을 구현하면서 시간 기반 이벤트 관리를 처음 경험할 수 있어 좋았다. 또 토큰 발급 여부를 전역 상태로 관리하면서, 시간과 상태 변화에 따른 여러 과정의 로직을 자동으로 수행할 수 있게 하는 것이 재밌었다.

다음 프로젝트에서는 localStorage가 아닌 cookie로 토큰을 관리해볼 예정이다.