코드캠프 FE 30일차 - TIL(RefreshToken,Graphql)

space's pace·2022년 6월 20일
0

📔 7_week 학습목표

  1. refreshToken?? >> RefreshToken
  2. graphql이 REST-API >> Graphql
  3. Async-await for문에서 쓰면 안 돼? ?? Promise.all
  4. 메모 >> Memoization
  5. 모바일 >> @Media

📔 학습목표
1. refreshToken?? >> RefreshToken
2. graphql이 REST-API >> Graphql

인정을 받는 과정 - 인가

메모리를 올리는 걸 -> scale up
메모리가 없는, 특정상태를 가지고 있지 않는 -> stareless
부하? 부아를 분산? -> scaleout(stateless 상태에서)
데이터베이스를 수평으로 분리 -> 샤딩

레디스에도 저장하지말고 jwt

Bearer 토큰을 전달

jwt 탈취하는 문제

accesstoken 30분에서 1시간~ 보안에 취약하기 때문에 짧게 잡음

시간을 짧게 주면서 생긴 문제
-> 시간이 지나면 로그인을 다시해야 함

RefreshToken

로그인ㅇ ㅣㅇㄴ증을 하면 jwt를 만드는데 이떄, 똑같은걸 하나 더 만듬

기간
하나는 엑세스토큰 -> 30~120분(일반적으로, 우리서버에서는 1시간)
하나는 리프레쉬 토큰 -> 2주~ 8주

페이로드에 엑세스 토큰 보내주고(스테이트에 저장해서 사용)
쿠키에 서버에서도 브라우저에 보내줄 수 있음

브라우저와 서버와 주고받느늑 ㅗㅅ이 가능하다
쿠키에 리프레시 토큰(httponly, secure)
백엔드에서 자동으로 넣어주는 거

----인증과정 끝....----

=== 인가 과정 시작 ===

브라우저에 네임 가격, 엑세스 토큰

인가 과정에서는 jwt임과 가정함.


리프레쉬 토큰을 발급받는 과정

  1. onError를 캐치한다.

리스토어엑세스토큰을 통해 재발급받는다
리프레스ㅣ 토큰을 발급받는다

리프레시토큰을 인가하면 엑세스토큰을 새로운걸 만들어서 보내준다.

  1. 엑세스 토큰 재발급

재발급 받은 토큰으로 재시도(마지막 실패 쿼리 재시도 -> 크리에이트 유즈드 아이템) -> 성공

  1. 마지막 실패 쿼리 재시도 -> 크리에이트 유즈드 아이템 -> 성공

레프레쉬 토큰 어써라이전

조용히 로그인이 다시됌 (조용한 인증)
-slient auth

아폴로셋팅에서 http로 설정되어잇는걸 https로 바꿔줘야 한다.

매 리퀘스트마다 이 과정을 거쳐야 하는게 아니라
만료가 됐을 때만 다시 한다.

리프레쉬 토큰 테스트 해보는데 적절함!

엑세스토큰 재발급
(리프레시 토큰 보고 자동으로 전달된다, 무언가 요청값을 주지 않아도 됌)

엑세스토큰 만료시간 1시간이라 테스트하기 힘듬
만료시간 5초짜리로 바꿔서 테스트해보기

표기된 부분 loginUserExample로 바꿈


보안상...


우리가 직접넣어준 토큰


자동으로 넣어진 토큰(리프레시 토큰)

서버랑 연동되는 데이터기 때문에
불필요한 데이터를 넣으면 x

브라우저에서는 접근이 불가능하다(httpOnly 옵션을 줘서)

-> 유즈뮤테이션을 만들어줘야 되는데 문제가 생김 -> 아폴로셋팅 안에잇는애들만, 즉, 아폴로 프로바이더 안에서만 가능

아폴로셋팅 안에서만 유즈 뮤테이션 유즈쿼리 사용가능

그럼 이 뮤테이션을 어케 날릴건가?

셋팅없이 그래프큐엘을 엑시오스처럼 사용할 수 잇게해주는 도구

graphql-request

yarn add graphql-request

오퍼레이션 - 방금실패한 쿼리 정보들

오퍼레이션을 리프레쉬코드 정보랑 바꿔치기 해줘여함

덴부분에 뉴엑세스토큰을 받아온다 (프로미스)

에러를 캐치를 하고, 엑세스토큰을 재발급을 받고, 실패쿼리 재시도

graphql이 REST-API이라고?

Graphql

함수의 인자로 엔드포인트 뒤에 애들이 오는 거임
레스트에이피아이의 포스트 방식이다(조회임에도 불구하고 post 였던 이유)
레스트에이피아이를 조금 변형해서 쓰고잇는거임

그래프큐엘의 장점

1. 수많은 엔드포인트를 단일화 시킬 수 있었음.

단일화 시키기 위해서 그래프큐엘 가서 실행하고 싶은 내용을 제이슨 형태로 바꿨음

2. 레스트에이피아이에서 문제됐던 언더패칭 문제를 해결할 수 있었음. (내가 원하는거를 각각 따로 가져와야됌, 그래프 큐엘은 묶음요청 가능)

3. 내가 가지고 오고 싶은 값 외에도 모두 가져오게 함 (오버패칭), 그래프 큐엘은 가져오고싶은 데이터만 가져올 수 있음.

-> 네트워크 비용 절감 효과

묶음요청 하면 실패와 성공을 모름
위에 껍데기는 무조건 에러
무조건 성공일수밖에 없다 -> 어떤게 성공이 나올지 모르니까
실패 -> 타입에서 걸리는 이유

그래프큐엘이 레스트에이피아이라면 포스트맨으로도 조회되야 함

-> 조회 가능!!!

그러면 아폴로 클라이언트는 왜 쓰는 걸까?


에이피아이로 받아온 데이터를 자동으로 임시저장

새로고침할때 엑세스토큰이 날라간다
로컬스토리지에 있는걸 가져와서 넣어줫다
근데 이젠 로컬스토리지에 안넣기로했음
그럼 새로고침할때 어떻게 하느냐??
그럼 다시 재요청 해야한다.
아까 겟엑세스 토큰을 재사용할거임

apollosetting 이 내용을 넣어주면
새로고침해도 {철수} 님 환영합니다 {철수}가 안 사라짐.

profile
블로그 이사 준비중!

0개의 댓글