TIL - 7주차 월요일

mangjell·2022년 4월 25일

7주차 목차

RefreshToken
Graphql은 사실 Rest-API래
Async-await를 for문에서 쓰면 안된다고? >>> Promise.all
새로 만들지 말고, 메모해 놓는거 어때? >>> Memoization
내 사이트 모바일에서도 보고싶어! >>> @Media

RefreshToken

기존에는 localStorage에 저장했지만, 이번에는 state에 저장해보자!

아래그림은, (인증 과정!!)
인증: 토큰을 받아내는 과정
인가: 토큰이 맞는지 확인하는 과정

jwt 토큰을 두개만든다. jwt1, jwt2
하나는 accessToken, refreshToken 이라는 이름으로 보낸다.
accessToken 데이터 받는 부분: payload
refreshToken 데이터 받는 부분: cookie

cookie에는 옵션이있다. => (httpOnly), (secure) 라는 옵션
(secure)를 사용하면 https로만 사용가능해져서 안전하다!!
브라우저에서는 refreshToken을 건드릴 방법이 없다!!

그다음, 브라우저에 accessToken 저장하고, cookie에는 refreshToken이 저장된다.

사용을 하다가 한시간(토큰 만료시간)이 지나고 상품등록 api를 요청할때, accessToken, 상품명, 가격 등을 적고 요청할때, 인가과정에서 토큰만료!!가 떨어진 상황이다. 그러면 백엔드에서 브라우저에 에러를 던지게 되는데 에러의 이름은 UNAUTHENTICATED. => 토큰만료라는 뜻

그런 후에 우리는 application들어가서 토큰 지우고 다시 로그인 했지만, restoreAccessToken을 요청한다.

restoreAccessToken을 요청할때, refreshToken이 딸려들어가게 된다. cookie에 저장된 것은 백엔드 요청할때 자동적으로 딸려 들어가는 것이기 때문이다.

(너무 오래지났을 경우)
refreshToken이 만료가 됬는지 비교 후, 만료가 됬으면, 로그인 페이지로 redirect시켜준다(너무 오래지났기 때문)

(만료 기간이 남아있을 경우)
만료 기간이 남아있다? => 새로운 jwt 생성 => 해당 jwt 토큰을 다시 브라우저에 돌려준다(jwt토큰이 accessToken이 되는 것이다) => 재발급 받고 나서 방금 전에 실패했던 api를 다시 요청한다 => (!인가 성공!) => DB에 data등록 => 결과를 다시 브라우저에 가져다준다(상품등록 성공)

에러 fetch
1. onError => 엄청많지만, unauthenticated만 확인
if(에러메세지가 unauthenticated이면...){
1) api 요청(restoreAccessToken을 새로 요청)
2) 재발급받은 accessToken을 글로벌 스테이트에 저장
3) 재발급 받은 토큰을 가지고 방금 실패한 api요청 재시도!
}