5주차 커리큘럼
Day 30
1교시
인증 과정 : Aythentication
만료가 될 때마다 다시 로그인 해줘야하는 귀찮음이 생긴다.
이때 referesh Tokken을 사용한다.
-
로그인 할 때 accessToken 과 refreshToken을 두개 만든다.
대신 만료시간이 다르다
accessToken ( 30 ~ 120분 )
refreshToken ( 2주 ~ 8주 ) -
브라우저에 넘겨준다.
payload: accessToken
cookie: refreshToken(httpOnly, secure '보안') 을 보내준다.
state: accessToken
cookie: refreshToken
인가 과정 : Authorization
createUseditem 을 하기 위해 name, price,..., "bearer accessToken"을 보내준다.
-
JWT를 복호화한다.
-
토큰이 만료가 되면 에러메시지를 브라우저에 전달해준다.
ERROR: UNAUTHENTICATED -
apollo-setting 설정을 한다.
graphql에서 에러가 발생했을 때 에러를 캐치 = onError
onError 가 토큰 만료 애러일 때
- 백엔드에 restoreAccessToken 에 refreshToken을 전달을 해준다.
- 만약 refreshToken의 기간이 남아 있으면 새로운 accessToken을 만들어 브라우저에 다시 보내준다.
- 마지막 실패 쿼리 ( ex) createUseditem ) 을 새로받은 accessToken으로 재시도 한다.
만약 refreshToken 만료시간이 끝났으면, 다시 로그인 ( Silent-auth: 조용한 인증 ) 라고 한다.
2교시
https로 바꿔준다. 백엔드에서 지원을 해줘야함.
원래 accessToken을 만들면 refreshToken 도 같이 들어온다.
하지만 http여서 값을 못받는 것이고, https로 바꿔주면 refreshToken을 쿠키애서 받을 수 있다.
credentials: "include" 도 써줘야한다.
refreshToken은 알아서 들어옴
쿠키에 들어있는 refreshToken은 httpOnly 옵션이기 때문에 브라우저에서 따로 접근이 불가능 하다.
자바스크립트에서 꺼내올 방법이 없다.
apolloSetting
- onError를 import 해준다.
ApolloSetting 중에는 useMutation, useQuery는 쓰지 못한다.
클라이언트를 만드는 세팅중이라 그 안쪽 만 가능
그래서 라이브러리를 써야한다.
graphql-request
- yarn add graphql-request 설치
설정
함수 나눠주기.
뒤로가기 하고 다시 들어가면 잘 되는 것을 확인할 수 있다.
3교시
새로고침 accessToken 받아오기
graphql은 rest.api 방식이다.
graphql의 조회는 GET방식이 아니라 항상 POST 방식이다.
graphql은 endPoint가 graphql인 POST 방식의 rest-Api 이다.
graphql은 묶음 전송을 할 수 있기 때문에, 어떤건 성공,실패 할 수 있어 전체 껍데기는 무조건 성공이다.
실패했는데 (200이 뜨는 이유)
그 안에 세부적으로 에러를 처리해준다.(type 애러는 실패)
graphql의 장점
- 수많은 endPoint를 단일화 시킴
- rest-Api는 내가 원하는 요청을 한개씩 밖에 못 가져온다. (언더패칭 Under-fetching) 언더패칭 문제 해결
- rest-Api는 내가 title만 받고 싶지만 fetchBoards(writer,title,contents...) 등 모든 것을 받아야한다.
(오버패칭 Over-fetching) 오버패칭 문제 해결
