[React] FrontEnd JWT 토큰 관리 프로세스

 

개인 공부 후 자료를 남겨놓기 위한 목적이므로,
생략되거나 오류가 있을 수 있음을 알립니다.
설명에 대한 지적은 언제나 환영입니다. :)

---

프로젝트를 진행하면서 Frontend에서 로그인의 상태 유지를 어떻게 하고 (리액트 기준), 

JMT 토큰을 어떻게 다루어야 하는지 정리해보았다.

 

 

1. 로그인 / 로그인 유지

1. 로그인 api에 id와 password를 가지고 post 요청을 보낸다.
2. 응답으로 받은 데이터를 처리해준다.
3. accessToken을 localstorage에 저장한다. ( 자동 로그인이 싫다면 sessionstorage에 저장한다.
4. refreshToken은 Cookie에 저장한다.
5. 액세스 토큰 만료 사전 확인을 위한 expiresAt을 만들어 localstroage에 저장함(현재 시간 + 1시간 - 수정 가능)우리의 경우 프론트에서 액세스 토큰의 만료에 대한 시간을 따로 관리했다.
6. 메인 페이지로 이동 (보통 App.jsx를 의미한다.)
7. App.jsx에는 항상 토큰의 유무를 주시한다.
8. 토큰이 존재한다면, 유저 데이터와 관련된 api로 토큰을 보내 redux에 유저 데이터를 저장한다. (로그인 유지)

 

 

2. auth refresh

1.  "/src/lib"에 axios와 관련된 메소드를 모듈화 하여 보관해놓았다. ( 다음 포스팅)
2. 기본적으로 우리의 프로젝트의 경우 accessToken이 필요한 api의 경우 먼저 expiresAt. 즉 토큰의 만료시간을 파악한 후 refresh를 진행하도록 설계했다.

 

refresh

• localstorage에 있는 expireAt을 확인
• 프론트 기준의 expireAt이 만료되었고, refreshToken이 존재한다면, 실제로 서버에서 accessToken이 만료되기 전에 api 서버에 먼저 refresh를 행하도록 했다.

 

+ env

• api 서버 주소 등은 보안을 위해 코드 자체에 작성을 지양하도록 한다. 따라서 env. 파일에 작성 후
• 주소를 src/config.ts에 불러온 후 해당 코드를 import 하는 식으로 진행했다.