인프런 커뮤니티 질문&답변

Jin Su Yu님의 프로필 이미지

작성한 질문수

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

토큰 재발급 로직 코딩하기

액세스 토큰 재발급 관련하여 질문이 있습니다.

24.06.09 20:11 작성

·

210

·

수정됨

0

안녕하세요 강의 잘 듣고 있습니다.

액세스 토큰이 만료되었다고 가정했을 때 프론트에서 특정 API(예시. post 조회)를 호출하면 토큰이 만료되었다는 에러 메시지를 받죠.

그러면 앱에서 토큰만료 리스폰스가 도착하면 토큰을 재발급 받은 후 다시 post를 조회하는 API를 호출하는건가요??

고객의 입장에서는 위 내용을 알 필요가 없을 것 같아서요.

(c. 클라이언트, s.서버)

C.API 호출 -> [ S.만료되었다는 익셉션 -> C.재발급 요청 -> S.토큰 재발급 -> C.다시 API호출 ] -> S.응답 반환

위 순서도에서 대괄호 친 부분은 클라이언트에서 알아서 다시 처리하는건지 궁금합니다.

답변 1

1

코드팩토리님의 프로필 이미지
코드팩토리
지식공유자

2024. 06. 10. 11:35

안녕하세요!

액세스 토큰을 재발급하는 과정에서 실제 사용자가 관여를 하는지에대한 질문이 맞을까요?

프론트엔드에서 재발급을 구현하는 "일반적인" 과정에는 사용자의 개입이 없습니다.

로직은 매우 간단합니다. JWT 토큰은 암호화된게 아니라 인코딩된 형태이기 때문에 내부 내용을 프론트에서도 뜯어 볼 수 있습니다.

대표적으로 두가지 방법을 생각 해볼 수 있습니다.

1) Access Token이 필요한 요청을 보낼때마다 만료 메세지가 반환될경우 Refresh Token으로 Access Token 재발급 후 이전 요청을 재요청하는 interceptor 로직 작성.

2) 백그라운드에서 Access Token의 만료 기간을 주기적으로 체크하며 만료되기 어느정도 전에 재발급 요청.

저는 개인적으로 1번만 사용합니다.

나중에 프론트엔드를 배우게되시면 알게 되시겠지만 백엔드와 크게 다를게 없습니다.

노출할 필요 없는 abstraction은 프론트도 굳이 노출하지 않습니다.

감사합니다!

Jin Su Yu님의 프로필 이미지
Jin Su Yu
질문자

2024. 06. 11. 11:09

안녕하세요. 답변 감사합니다.

1번에서 내용은 잘 이해가 가는데 프론트엔드단에서 Access Token을 최신화를 어떻게 시키는지가 궁금합니다.

인터셉터를 통해 새로운토큰으로 이전 요청을 재요청해서 Response를 프론트엔드에 전달해준다. 그럼 프론트에서는 해당 토큰이 유효한지 유효하지 않은지 확인할 수 없고 / 서버에서 새로운 토큰으로 API 응답은 전달했지만 새로운 토큰 자체는 전달하지 않은게 아닌가? 라는 생각이 들어서요.

코드팩토리님의 프로필 이미지
코드팩토리
지식공유자

2024. 06. 12. 09:32

백엔드를 말씀드린게 아니라 프론트엔드를 말씀드린겁니다.

프론트엔드에서 A 요청을 X 토큰으로 진행한 후 액세스 토큰 만료 메세지를 받으면 Refresh Token으로 액세스 토큰을 자동으로 재발급합니다. 그 다음 똑같은 A 요청을 새로 발급받은 Y 액세스 토큰으로 요청하면 됩니다.

백엔드에서 상상 가능하신만큼 프론트엔드에서도 어렵지 않은 로직입니다.