React 개발 Step1

프론트 화면을 리액트로 개발하면서.. 고민했던 부분들.. 기록해보자.

 

1. 일반적으로 로그인 후 response를 setCookie 하면 심플하다.

https://jrepository.tistory.com/m/65

2.인증서버를 통해서 토큰을 받는 프로세스

step 1. 리액트 로그인화면에서 "구글 간편 로그인" 요청

step 2&3 구글 로그인 페이지 전환 "로그인&동의 진행"

step 4&5 구글로부터 전달 받은 코드를 백엔드에서 토큰으로 교환

step 6 구글에서 이메일 계정을 가져와서 "우리" 사용자 테이블 findByEmail 

step 7 자체적인 JWT 생성

step 8.JWT를 프론트에 전달!!!!

 

백엔드에서 다 처리하고 필요한 JWT만 만들어서 프론트 리다이렉트..하면서 쿠키에 담았다.

띠용!!! 근데 리액트에서 쿠키에 담긴 정보를 How Get.............

 

몇 가지 테스트를 진행해 봤지만....좌절스..... 

 

생각을 전환해서 ...5번 Step에서 프론트까지 흘려 보내고 6번 프론트 Step에서 api 발사 하면 response를 쿠키 저장 할 수 있겠다..

요로게 하면 되긴 하는데... search!!

 

But 카카오도 동일하게 flow... 백에서 다 처리하구 클라이언트에서 로그인 결과(토큰)만 넘겨 주는 형태이다.

 

리액트 라우터에서 쿠키나 헤더를 어찌 받나요? 아부지 알려주세용!! 일단 get 으로 가즈아!! ㅜㅜ  좀 더 고민스 

 

searchParams으로 처리. ..보안?? 아몰랑

 

 

로그인페이지에서 쿠키 담아두고.... 리덕스에 사용자 정보 dispatch 하구

메인화면 달려보자!!!

 

메인에서...쿠키 정보 없으면 다시 로그인 페이지 보내규.. 쿠키 데이터 있음..

사용자에 따른 LNB 메뉴 동쪽으로 셋팅쓰!!

 

 

open state 둔 이유는  직접 메인 Page 주소를 치고 들어오면 어색하게 

찰나이지만 메인 페이지 슬쩍 내비치고 로그인페이지로 이동된다..

 

하악하악. 프론트... 손이 진짜 많이 간다....프론트 개발자......존경쓰!! 끝이 안 보인다.

 

이메일로 로그인은 1번으로 구글&카카오 Oauth는  2번 Flow!!!