코드캠프 부트캠프 30일차

개발일기·2022년 2월 24일
0

refereshToken

refreshToken의 설명에 앞서 22일차에 남겼던 로그인 프로세스가 기억이 안난다면 다시 한번 읽어보고 오자.

코드캠프 부트캠프 22일차

결론적으로 나온게 JWT인데, JWT는 토큰 자체에 로그인 정보를 저장해놓기 때문에 백엔드에서 DB로 접근할 필요가 없어졌다.
하지만, JWT도 백엔드에 들어가 로그인 유무만 구분하기에 중간에 탈취가 되어도 이 정보가 맞는지 검증이 불가능하다는 한계가 존재하게 되는데, 이를 위해 만료시간을 주어 시간이 지나면 재발급(refreshToken) 시키게 되는 것이다.

로그인을 진행할때 2개의 결과물을 보내주게 되는데 accessToken과 refreshToken을 보내주게 된다.
accessToken은 state에 담아주고, refreshToken은 cookie에 담아준다.
로그인 유무가 필요한 특정 API를 요청을 예로 들어보자.
토큰이 만료가 된 경우에는 브라우저에서 'UNAUTHENTED'에러를 반환해주는데, 이 에러를 받게 되면 Browser단에서 app.tsx부분에서 받은 에러가 어떤 에러인지 체크한 후 인가 관련 에러일 경우에는 refreshToken을 가지고 accessToken 재발급 요청을 하게 되고, 새로 발급받은 accessToken을 다시 state에 담아준 후 기존 요청에 실패했던 API를 새 accessToken을 가지고 재요청 하게 된다.

데이터 암호화를 사용하기 위해 http uri를 https로 변경해주고, 쿠키를 포함시켜 보내기 위해 credentials를 include로 변경시켜준다.
또한, onError()를 사용해 errorLink를 만들어주고, onError()안에는 콜백함수를 넣는다.

refreshToken의 프로세스

API 요청을 했는데,
1. 만약 에러가 있다면
2. 에러를 하나씩 뽑아 해당 에러가 토큰 만료 에러(UNAUTHENTICATED)인지 확인한다.
3. 토큰 만료 에러라면 refreshToken으로 accessToken을 재발급 시켜준다.
(app.tsx에서는 ApolloClient 세팅이 끝나지 않은 시점이기 때문에 graphql-request 라이브러리를 사용하여 mutation, refreshToken을 실행시킨다.)
4. 재발급 받은 accessToken을 state에 다시 저장시킨다.
5. 방금 실패한 쿼리 정보가 담긴 operation 설정을 operation.setContext({})를 활용해 accessToken만 변경하여 forword(operatoin)로 재 요청한다.

profile
개발자가 꿈이에오

0개의 댓글