7주차 커리큘럼
6월 20일 학습목표
Refresh Token
AccessToken 은 사용자의 로그인 정보를 담고 있는 JWT토큰 데이터
일정 시간 동안만 사용할 수 있도록 만료 기한이 정해져 있어서 만료 기한이 지나고 사용자가 로그인 정보가 필요한 페이지에 접근하려고 하면
백엔드에서 미리 지정해둔 경로로 redirect 되거나 에러 발생
로그인 Authentication 후, 만료시간이 다른 jwt를 2개 만든다.
기간이 짧은 것이 accesstoken, 기간이 긴 것이 refreshtoken
payloaddp accesstoken => state(글로벌-리코일)에 우리가 넣어줌
cookie refreshtoken => 백에서 자동으로 넣어줬음
!! 쿠키는 브라우저<>서버 서로 전달이 가능하다
=> document.cookie를 하면 접근이 가능하기 때문에 접근을 불가능하게 옵션을 걸어준다
=> 1) httpOnly, 2)secure
❗ **httpOnly** : 브라우저에서 Javascript를 이용해 쿠키에 접근할 수 없고, 통신으로만 해당 데이터를 주고받을 수 있다
**secure** : https 통신 시에만 해당 쿠키를 받아올 수 있다
<인증과정 만료 시 프로세스 : 아폴로셋팅에 준비 - 조용한 인증 (Silent-auth)>
api 인가 과정 중 발생한 오류가 accesstoken의 기간 만료로 인한 오류라면 에러메시지(Unauthenticated)를 전달
➡️ apollo-setting 설정에서 onError 캐치(Unauthenticated)
➡️ restoreAccessToken api 요청하기 (refreshtoken이 헤더를 통해 전달됨)
➡️ 이 api에서는 refreshtoken을 인가한다
➡️ refreshtoken도 기간 이내라면, new accesstoken을 만들어 전달한다 (재발급)
➡️ 재발급받은 accesstoken을 state에 다시 저장한다
➡️ 마지막 실패 쿼리 api 재시도
uploadLink의 **uri 경로를 http에서 https로** 바꾸고,
민감한 정보 포함을 승인한다는 뜻의 **credentials: “include”** 옵션을 추가
const uploadLink = createUploadLink({
uri: "https:~~~~",
headers: { Authorization: `Bearer ${accessToken}` },
credentials: "include",
});apollo setting 없이 axios 처럼 사용하게 해주는 라이브러리
graphql-request
Rest API는 필요한 기능 별로 서로 다른 endpoint를 가지고 있다.
하지만, 이렇게 되면 서비스의 규모가 커질수록 endpoint의 수가 많아아진다.
graphql이라는 하나의 endpoint에 모든 API를 통합하는 방식으로
GraphQL의 query와 mutation 모두 post 방식으로 데이터 요청
🌼 장점
0. endpoint 단일화
1. under-fetching 문제 해결 : 내가 필요한 데이터보다 적은 양을 가지고 오는 문제 해결
2. over-fetching 문제 해결 : 내가 필요한 데이터보다 더 많은 양을 가지고 오는 문제 해결
포스트맨에서 graphql 사용하기
post 방식으로 사용할 것
오늘 공부를 돌아보며
기능 구현 검사를 받았는데, 앞으로 구현해야할 필수 기능이 몇개 안남았다~ 몇몇 부분에서 나사빠진것처럼 삐그덕대는거 고치고, 필수기능 붙이는 것이 8주차까지의 목표.....
오늘 걸어오면서 너무 더워가지고 정신 혼미했는데 시프티 안찍음ㅜ 나진짜너무더워 내자리
이마트가서 선풍기 살 뻔
