jwt 관련 정리글 (만료시간, 토큰 생성 및 통신, 시나리오)

※ 아래 글을 읽기전 확인사항

 

1. 필자는 MEVN(MongoDB, Express.js, Vue.js, Node.js) 프로젝트를 하고있음

2. refresh 토큰과 access 토큰을 사용

3. refresh 토큰은 redis에 저장하여 사용

 

※ 만료시간 관련

 

1. jwt 인증시간을 설정하면 앞단에서 만료시간을 정할 필요가 없음.

 - 토큰의 만료시간은 토큰을 검증하는 과정속에서 내가 정해둔 만료시간을 확인하고 만료시간 도달시 재발급 하는 수순으로 작업하게됨 (지우게 된다면 좀 끔찍해질수도..)

 

2. 그러나 redis의 만료시간은 설정해주는게 좋을거 같음 (개인적인 생각)

 - 불필요한 리소스를 삭제하는게 옳다고 생각하기 때문 (물론 refresh token의 만료시간은 길다.)

 

※ 토큰 생성 및 통신

1. 토큰 생성

 1-1. id, pw값을 json에 담아 백엔드 login api로 전송(axios) - front

 1-2. 프론트에서 전송된 값을 토대로 access토큰, refresh토큰 생성 - back

 1-3. refresh토큰을 redis에 저장, res.json으로 access, refresh 토큰을 front로 전송 - back

 1-4-1. response.data로 백엔드에서 전송된 토큰값을 vue-cookies를 사용하여 쿠키로 저장 - front

 1-4-2. response.data로 백엔드에서 전송된 토큰값을 localStorage 혹은 sessionStorage에 저장 -front

 

2. 토큰 시나리오(login 상태 확인, 권한 확인 등을 위한)를 위한 통신

 2-1. localStorage 혹은 sessionStorage 혹은 vue-cookies에 담겨있는 토큰값을 headers에 담아 백엔드로 전송 - front

 2-2. 토큰 검증 후 토큰 시나리오 진행 - back

 

※ 토큰 시나리오

 

0. 토큰이 있다(설정해둔 만료시간이 유효하다), 토큰이 없다(설정해둔 만료시간이 유효하지 않다) 라고 이해하는게 빠름 타 블로그에 정리글을 볼 때 시나리오 관련해서 토큰이 있다, 없다로 나눠서 글을 작성하는데 있고, 없고는 토큰의 만료시간이 유효한지, 유효하지 않은지 라고 생각하면 더 편함 (개인적인 생각)

 

1. refresh토큰과 access토큰이 있다 -> 해당 페이지 route

2. refresh토큰은 있으나 access토큰은 없다 -> 기존 access토큰의 payload값을 decoded한 후 newAccess토큰 발급

3. refresh토큰은 없고 access토큰은 있을경우 -> access토큰을 기반으로 newRefresh토큰 발급

4. 둘 다 없는경우 -> 로그인 페이지로 안내 (로그인이 안되어있음)