AccessToken

기존에 내가 알고 있던 로그인 방식은 로그인 성공시 암호화된 accessToken을 result로 받고, 이를 localStorage 나 sessionStorage에 setItem했다가, 매 api요청때마다 Headers에 accessToken을 getItem하여 첨부하여 인증하는 과정이었다. 대충의 과정은 아래와 같다.

1. [Front] ID와 Password의 값을 body에 실어 POST요청
2. [Back] 전달받은 ID와 Password를 검증하고 accessToken 반환
3. [Front] accessToken을 sessionStorage에 저장 후 다음 api호출때부터
   꺼내서 Headers에 첨부
4. [Back] api호출시 accessToken이 유효한지 확인하여 메세지 전달
5. [Front] 메세지 값(Success or Fail)에 따른 분기 처리

이 인증과정에서는 허점이 있는데 만약 accessToken을 탈취당할 경우, 속수무책이다. 일단 DB를 사용하는 것이 아닌 accessToken의 값이 유효한지 아닌지만 확인하기 때문에 사용자를 특정할 수 없다. 이러한 경우를 고려하여 유효기간을 설정하여 만료가 되면 접근을 못하게 구현할 수 있지만 다시 로그인해야되는 번거러움이 있다.
(만약 유효기간을 짧게 1시간으로 설정했다고 하더라도 벨로그처럼 글을 작성하는데 1시간 이상 소요된다면 '출간하기'버튼을 클릭하는 순간 글이 다 날라가고 로그아웃된다. 생각만 해도..😱)
이러한 번거러움과 보안을 높이기 위해 RefreshToken가 나타나게 되었다.

RefreshToken

refreshToken은 accessToken을 재발급받을 수 있는 token으로, DB에 저장되기 때문에 사용자를 특정할 수 있고, 탈취당했다고 판단되면 서버에서 refreshToken을 삭제시켜 로그아웃 시킬 수 있다. 과정은 아래와 같다.

1. [Front] ID와 Password의 값을 body에 실어 POST요청
2. [Back] 전달받은 ID와 Password를 검증하고 accessToken, refreshToken 반환 및 만료시간 설정(DB에 refreshToken 및 사용자 저장)
3. [Front] accessToken을 sessionStorage에 저장 후 다음 api호출때부터
   꺼내서 Headers에 첨부
4. [Back] api호출시 accessToken이 유효한지, 만료시간이 지났는지 확인하여 처리
5. [Front] accessToken이 만료되어 api동작이 실패(에러)한다면, refreshToken을 백엔드에게 전달
6. [Back] refreshToken요청이 오면, DB에 저장된것과 같은지 확인하고, 맞으면 accessToken 새로 반환
7. [Front] 새로 반환된 accessToken을 다시 sessionStorage에 저장 후 다시 요청

(출처: https://www.bezkoder.com/)

일단 여기까지는 이해하였고, 현재 처리하기 힘든 부분은 5번 부분인데, 프론트엔드에서 처리할 수 있는 방법은 학습해보니 약 2가지가 있는것 같다.

1. 로그인 성공 후 accessToken, refreshToken, expiredTime(만료 시간)을 받고, 다음 api 호출 직전에 expiredTime이 만료됐는지 안됐는지를 확인하여 만료됐다면 재발급 받은 후 sessionStorage에 accessToken저장 후 Headers에 실어서 보내기.

2. axios의 interceptors를 활용하여 요청에 대한 응답을 가로채서 error가 아닐때(만료되기 전)는 return, error일때는(만료된 token, 이때는 응답코드가 401이라고 한다.) refreshToken으로 새로운 요청을 보내고 accessToken을 sessionStorage에 저장 후 다시 요청.