7주차 수업
오늘 배울 내용!
Refresh Token
(인증과정)
로그인을 할 때 accesToken을 2개 만드는데 하나는 1h뒤 만료 refresh Token은 2w뒤 만료.
자동으로 refreshToken은 쿠키에 저장.
변수는 accessToken에 저장한다.
(인가과정)
Header에 accessToken을 주고 인가를 한다.
1시간이 지났을 때 accessToken이 없으니 에러가 난다.
이때 FrontEnd는 에러를 잡는 if문에 걸리면서 오류가 뜨고 백엔드에 있는 restoreAccessToken에 쿠키에 있는 refreshToken을 넘겨주면 restoreAccessToken에서 refreshToken을 인가하면 새로운 accessToken(1h)를 만들어 주고 브라우저에 넘겨준다.
넘겨받은 Token은 변수에 새롭게 저장해주고 다시 fetchUser에 새로운 accessToken을 넘겨준다.
User입장
1. 버튼클릭 fetchUser시도
2. 실패
3. accessToken 재발급
4. 실패쿼리 재시도
5. 데이터 받아옴
=> 조용한인증(SilentAuth)
ect) accessToken을 1시간으로 둔 이유는 만약 탈취를 당해도 1시간안에 뭔갈 안하면 토큰이 만료되게 하는거다.(보안문제. 일반적으로 30분~2시간으로 설정해둔다.)
인증 부분을 AuthService
인가 부분을 ResourceService라고 한다.
구글 카카오 네이버 같은 회사가 AuthService을 따로 빼서 제공해서 회원가입할때 구글, 네이버 ,카카오를 통해 가입하는 로그인을 소셜로그인이라 한다.(open Authentication) (oAuth)
AuthService
ResourceService를 나눈 것처럼 장바구니, 결제, 유저정보 이런 부분도 폴더 하나하나로 나눌 수 있다.
이것의 장점은 폴더를 나눴기 때문에 장바구니에 오류가 나도 결제나 유저정보 보는 곳은 영향이 없고 정상적으로 실행이된다.--> MSA(마이크로 서비스아키텍쳐)방식
Promise?
비동기 작업 도와준다.
Observable?
연속적인 비동기 작업 도와준다.
예를 들어 3,5페이지를 아주 빠르게 눌렀을 때 5페이지가 먼저오고 3페이지가 그 뒤로 오게되면
5페이지가 나왔다가 3페이지가 나온다. 그럼 안되기 때문에 먼저 3페이지를 삭제해야된다. 이럴때 사용됨.
Observable의 사용예제.
- 연속적인 페이지클릭
- 연속적인 검색어 변경
--> 연속적인 것에 반응을 해서 반응형 프로그래밍(reactive X-> rx.js)이라고 한다.
함수형 프로그래밍 : [1,2,3].filter().map().forEach()
