토큰 재발급 동기화 문제

Refresh 토큰을 이용해 Access 토큰 재발급을 하는 과정에서 한 페이지에서 여러번의 API가 호출 된 경우 토큰들이 동기화가 제대로 이뤄지지 않는 문제가 발생할 때 가 있다.

 

1. 문제 발생

이 문제점에 대해서 일단 자세히 설명해보려고 한다. 만약 클라이언트 쪽에서 만료가 된 access토큰을 보내는 경우 refresh토큰을 사용해서 access토큰을 재발급하는 과정이 이루어 지는데, 다수의 요청을 동시에 서버로 보내게 된다면 맨 처음 서버로 요청한 API가 토큰을 재발급하구 그 다음 서버로 요청한 API가 토큰을 재발급하게 된다. 필요없는 토큰 발급로직을 여러번 하게 되는 문제점이 발생하게 된다.

 

하지만 더 심각한 문제점은 무엇이냐면, 이것은 사실 로그인 로직 구현에서 다를 수 있겠지만 만약 refresh토큰 까지 갱신을 하게 되는 경우 서버의 refresh토큰과 클라이언트쪽의 refresh토큰이 동기화가 되지 않는 문제점이 발생할 수 도 있다.

 

생각보다 크리티컬한 문제이기 때문에 어떻게 해결했는지 과정에 대해서 설명하려고 한다.

 

2. memoize 라이브러리 사용

일정 시간 동안 동일한 함수 호출 시 동일한 반환 값을 사용할 수 있게 즉, 함수의 반환 값을 캐싱해두는 역할을 할 수 있게 해주는 라이브러리이다. 해당 라이브러리를 사용하게 되면 초기에 한번만 토큰 재발급 함수를 호출하고 그 후 불러지는 토큰 재발급 함수는 동일한 반환값만 가지고 실패한 API를 다시 호출하게 된다.

 

• 라이브러리 다운로드

npm install memoize

 

• 토큰 재발급 함수

import memoize from 'memoize';

// 토근 재발금 함수
const requestToken = memoize(
	async () => {
		try {
			// 토큰 재발급 함수 로직 및 토큰 반환
		} catch (error) {
			// 토큰 발급 실패시 토큰 삭제
		}
	},
	{ maxAge: cacheTime }
);​

 

 

3. 해결 후 어떻게 되는가?

 

위와 같이 토큰 재발급 함수를 설정하게 된다면, 아래의 그림처럼 토큰을 재발급 하는 API는 한번만 서버로 요청하게 되고, 응답을 받고 토큰을 갱신한 후에 axios interceptors를 통해서 실패한 요청들을 재요청하게 된다.