4. 쇼핑몰 웹사이트 만들기 (17)

<알고리즘 단계>

//1. 전체 상품 페이지, 로그인 페이지, 상품상세 페이지 - 3개의 페이지 (가 필요) -완료-

//1-1. 네비게이션 바 (만들기.생성) !!!  -완료- 

//2. 전체 상품 페이지에서는 전체 상품을 볼 수 있다. -완료-

//3. 로그인 버튼을 누르면 로그인 페이지가 나온다.  -완료- (앞)

//4. 상품 디테일을 눌렀으나, 로그인이 안되어있을 경우에는 로그인 페이지가 먼저 나온다.

//5. 로그인이 되어있을 경우에는, 상품 디테일(상세) 페이지를 볼 수 있다.

//6. 로그아웃 버튼을 클릭하면 로그아웃이 된다.

//7. 로그아웃이 되면 상품 디테일(상세) 페이지를 볼 수 없고 다시 로그인 페이지가 보인다.

//8. 로그인을 하면 로그아웃이 보이고 로그아웃을 하면 로그인이 보인다.(상단 오른쪽)

//9. 상품을 검색할 수 있다.

 

 

<//4. 상품 디테일을 눌렀으나, 로그인이 안되어있을 경우에는 로그인 페이지가 먼저 나온다.>

상품 디테일 페이지는 아무에게나 보이면 안된다. 로그인한 사용자만 볼 수 있다. 

따라서 상품 디테일 페이지는 protect, 즉 보호해야한다.

 

우리가 보호해줘야 하는것 : 상품 디테일 페이지

로그인 여부에 따라 상품 디테일 페이지가 보인다 아님 안보인다로 되어있다.

 

 

지금은 그냥 route안에 들어가 있다. 

 

그러나 ProductDetail은 보호받아야 한다.

 

그래서 PrivateRoute를 따로 만들어 보자!

 

 

 

조건부를 return해줄 것이다.

 

<조건>

authenticate가 true이냐 false이냐에 따라서...

true이면 상품 디테일 페이지 보여주고, false이면 로그인페이지로 리다이렉트(빠꾸)!

 

일단 authenticate라는 정보를 PrivateRoute에서 읽어줄 수 있어야 한다.

그래야 true인지 false인지 알 수 있다!

 

PrivateRoute는 authenticate를 props로 들고간다.

 

자동으로 PrivateRoute가 import 된다.

 

authenticate라는 정보를 {}props로 들고온다.

냅다 <div></div>를 보여주는게 아니라... 여기서 조건을 제시한다.

여기서 질문을 하자면...

authenticate가 true이면 망설임없이 ProductDetail 페이지를 보여준다.

만약에 false이면 로그인을 안한 사용자이다. 그러면 로그인 페이지로 가서 로그인을 해줘야겠지?

 

"redirect : 경로를 튕겨주세요"

redirect를 할 수 있는 컴포넌트 = Navigate

Navigate to="/login"/  == 로그인 페이지로. 방향을 꺾어주세요.

 

Navigate를 import 시킨다.

 

 

<정리>

 

따로 PrivateRoute를 만들어줬을 뿐! 차이는 없다~

앱 안(App.js)에서 만드든지 아님 따로 PrivateRoute(js)를 만들었든지 상관 no!

 

product/:id 로 가고싶을때에 우리는 냅다 ProductDetail을 보여주는 것이 아니라 PrivateRoute를 호출한다.

App.js 하단 일부

App.js 하단 일부

 

<결과>

상품 카드를 클릭하면 아무런 반응이 안나온다.