로그인 과정에서 액세스토큰을 받는 인증
createProduct를 할때는 액세스 토큰을 확인하는 인가(db를 안가고 백엔드 자체 복호화)
jwt를 통해 인가는 db를 안가도 됨
토큰이 만료되면?!
백엔드에서 응답에다가 redirect 기능을 넣어줘서 브라우저 화면을 전환시켜준다 -> 로그인페이지로 돌아가는 redirect
-> 귀찮아! 이거 안할거야! -> refreshToken으로 해결할거야
로그인할때 암호화를 2번 해서 보낸다
1. accessToken (2h 정도)
2. refreshToken (2주~1달정도)
app.tsx에 에러 검출 시 실행되는 함수 설정
- Error 나면 실행
- 인가 에러인지 체크
- refreshToken으로 accessToken 재발급 요청
- 발급받은 accessToken을 state에 저장
- 방금 실패했던 (error) API를 재요청(새 accessToken으로)
cookie - httpOnly, secure방식
restoreAccessToken에서 cookie를 통해 들어온 refreshToken을 열어보고, 기간이 유효하면 새로 AccessToken을 돌려준다.
App.tsx는 발급받은 accessToken을 state에 저장한다. 그러고나서 신규 accessToken으로 방금 실패했던 (error) API를 재요청한다
-> 근데 이 과정이 매우 빨라서 사용자는 에러가 났는 줄도 모른다
어떤 회사는 accessToken을 새로 내줄때 refreshToken도 새로 줘서 로그인 기간을 엄청 늘려준다!
소셜로그인(OAuth) : 인가를 open해놨다
로그인을 구글/네이버/카카오 백엔드에서 하면 accessToken을 받아서 다른 백엔드(우리 백엔드)에 넘긴 다음, 인가를 진행한다
우리 서비스도 이렇게 만들 수 있다
서비스 세분화 ->Micro Service Architecture MSA
폴더를 따로 만들었기 때문에 Java, Node, Python 등등 여러 언어로 나눠서 만들 수 있다
서비스마다 팀을 나눌 수 있음
백엔드 api를 올렸을 때 백엔드에 문제가 생겨서 중단이 됐을 때! 다른 api는 이용가능하기 때문에 서비스 전체 중단되는 일은 없다~
그럼 MSA로 다 하면 되나? -> 단점도 많음.. 복잡해서 큰 회사에서 하기 굿
App.tsx에서 새로고침했을 때 토큰하겨오는 useEffect 로컬스토리지 주석
30-01-login에서 useInfo는 지워놨다. accessToken에만 집중하게
30-02-login-success 원래 방식대로 fetch data에서 뽑아왔다
Secure 옵션은 https에서 가능인데, header를 보면 http로 요청받는다 -> https로 바꿔줘야한다!
http
refreshToken 생성!
아폴로 세팅
-> 독스에 다 나와있으니까 나중엔 혼자 보고 작성할 줄 알아야한다!
useMutation 사용 안됨! 다른 라이브러리 사용해야한다 -> graphql-request
========== 이번 수업 조졌다 ! ==========
포스트맨으로 그래프큐엘 요청하기
게시글 조회
Axis.get(API 주소). ;API 주소를 end point라고 한다
게시글 등록
Axis.post(API 주소, {데이터}).
Graphql 도 불러보자!
Graphql은 엔드포인트가 하나인 rest api다~
Fetch, create등 모두 post로 요청한다 -> Rest api의 언더페칭 문제를 해결
리턴값 선택이 가능하니 오버페칭 문제도 당연히 해결!
중요한 점
요청이 여러개 가다보니까 어떤건 성공하고 어떤건 실패할 수 있다. 근데 post 전체에 대해 200이라고 뜰 수 있다
내 데이터를 넣어보내야하기 때문에 post로 요청하고, 결과는 항상 200(성공)으로 돌려받는다.
쿼리!
