Refresh Token

깔아야할 라이브러리

graphql-request

$ yarn add graphql-request

accessToken이 만료되었을때 해결 방법 2가지

첫번째 방법

1. onError를 만나면

2. restore API를 보내면서 accessToken와 같이 Backend로 보낸다.

3. 그리고 Backend는 DB로 받은 데이터를 보내서

4. 인증시간이 다시 reset된 accessToken을 Backend로 보낸다.

5. Backend에서 reset된 accessToken을 Br로 넘겨준다.

6. Br에서 새로 발급된 accessToken을 받으면 Global Context에 저장한다.

7. 그리고나서 실패한 쿼리를 재 요청한다.

만약 refreshToken이 두달짜리면, 두달뒤에 accessToken이 만료가 되었을때,

다시 로그인 하라고 알람이 뜨면서 로그인창으로 이동 됨

이렇게 하면 토큰이 만료가 되어도 자동으로 갱신이 되기 때문에(refreshToken), 사용자는 토큰이 만료가 될 일 없이

서비스를 이용 할 수 있다.


token 만료 => 에러 캐치 => restoreAccessToken 요청 => accessToken을 받아와서

=> globalContext에 저장 => 다시 쿼리 날림 => 새로운 accessToken 재발급 받아서 정상작동

무한 반복

2번째 방법

refreshToken을 무시하고 그냥 다시 로그인 하라고 하는 방법

마이크로 서비스

Autherization 서버

resource 서버

브라우저에서 backend 서버로부터 인증관련 데이터를 넘겨받으면

Br과 Backend간의 통신은 끝난다.(Autherization 서버 통신 끝 , resource서버에서만 통신)

그런데 만약 accessToken이 만료시간이 지나서

에러를 던진다면 다시 Back이랑 통신해서 다시 accessToken을 재 발급 해온다.(다시 Autherization 서버 통신 시작)

여기선 간단하게 Autherization서버와 resource서버 2가지로 나눴지만

Backend에선 더 세세하게 역할을 나누어서 서비스 한다.

이걸 마이크로 서비스라고 한다.

마이크로 서비스의 장점은 유지보수가 편함.

리프레쉬 토큰

에러를 만났을때 restore api를 요청을 하기 위해선

에러가 잡아주는게 필요하다

에러가 났을때 체크해주는 기능은 onError이다

_app.tsx에서 마운트 되자마자

localStorage에 refreshToken이 "true" 이면

getAccessToken에 setAccessToken을 넣어서 실행시킨다.

참고로 로그인할때 로컬스토리지에 refreshToken이라는 값을 "true"로 집어넣어 줬다.

setAcessToken을 받아서 RESTORE_ACCESS_TOKEN을 요청한다.

restore API를 요청하면 갱신된 accessToken을 받는데, result에 담겨져있다.

newAccessToken을 props로 받은 setAccessToken으로 global State에 저장한다.

1. GraphQLErrors가 있다면
2. 그때 발생한 에러가 "UNAUTHENTICATED" 라면
3. 기존의 헤더값을 새로운 accessToken으로 저장
4. 그리고나서 operation에 최종 결과물에 집어놓고 리턴한다.

쿠키의 srcure값 때문에 안전한 사이트로 해야해서 주소에 http말고 https를 적어줘야함

그리고 client를 통해서 밑에있는 하부의 컴포넌트에서 Apollo Client를 쓸 수 있기 때문에,

client를 꼭 전달해줘야 한다.