코드캠프 Day 31

코딩은 마음맞는 사람이랑 함께할땐 재밌어진다
혼자하는 코딩은 외로워

오늘 배운 것

시간이 지나면 만료되는 로컬스토리지의 accessToken을 해결해줄 refreshToken을 배웠다.
JWT 토큰에 로그인 정보가 들어있어서 백엔드에서 DB로 갈 필요없어졌다. 하지만 JWT도 백엔드에 들어가 접속의 유무만 구분하기때문에 탈취되어도 DB검증이 불가능하다는 한계가 있다. 그래서 만료시간을 주어 재발급(refreshToken) 이용하는 것이다.

로그인을 하면 accessToken과 refreshToken 두개를 보내주어 accessToken은 state에 담고 refreshToken은 cookie에 담는다.

로그인이 필요한 특정 API를 요청할때 accessToken이 만료되면 Browser에게 UNAUTHENTED 에러를 반환한다. 이 에러를 받게 되면 Browser단에서 app.tsx부분에서 받은 에러가 어떤 에러인지 체크한 후 인가 관련 에러일 경우 refreshToken을 가지고 accessToken 재발급 요청을 하게 된다. 그렇게 새로 발급받은 accessToken을 state에 다시 담아준 후 기존에 요청에 실패했던 API를 새 accessToken을 가지고 재요청하는 것이다.

1. 만약 gql에러가 있다면
2. 에러를 하나씩 뽑아 해당 에러가 토큰 만료 에러(UNAUTHENTICATED)인지 확인해주고
3. 토큰 만료 에러라면 refreshToken으로 accessToken을 재발급 시켜주어야 하는데, 이 부분에서 ApolloClient세팅이 끝나지 않은 시점이기에 restoreAccessToken(useMutation)요청이 불가능했죠! 그렇기 때문에 우리는 graphql-request라이브러리를 사용하여 요청했습니다!
4. 재발급 받은 accessToken을 setAccessToken()을 통해 저장시켜주고,
5. 방금 실패한 쿼리의 정보가 담긴 operation의 설정을 operation.setContext({})를 활용해, accessToken만 변경하여 forword(operation)로 재요청

https://velog.io/@owlsuri/refresh-token

게시판 프로젝트 진행상황

마켓 QnA 등록, 리스트
refreshToken