redirect (5-6) <가면은 안되는 페이지> - 보호해주어야 하는 페이지

모두에게 공개된 페이지가 아니라 로그인한 유저만 볼 수 있는 그런 페이지들을 어떻게 만들까?

이런 라우팅 시스템은 어떻게 만들까?
(ex.profile은 로그인한 유저만 볼 수 있도록 해야함!)

 

profile 페이지 들어가려고 했는데 로그인이 안되어있어서 로그인 페이지로 가는... 

확꺾어주는것... 로그인하시오 라고 꺽어주는것(꺾는것) .... 

=> 리다이렉트(redirect) - 다른 방향으로 가게 한다.

 

<유저가 로그인을 했다면 유저 페이지를 보여주고... 유저가 로그인을 안했으면 (profile page) 유저 페이지를 안보여주고 로그인 페이지를 보여주고... >

 

이걸 위해서 page를 만들어본다.

 

 

<UserPage>

25번줄 UserPage x / PrivateRoute O (왜냐하면 전자로 하면 만 천하에 공개되는것임)

PrivateRoute로 갔는데 return해줄게 아무것도 없는데?

우선 유저가 로그인을 했는지 안했는지 여부를 따져주어야 한다. -> useState생성(1번줄)

 

가정

authenticate라는 값이 false이면 유저가 로그인을 안한거고(해야하고), true이면 유저가 로그인을 한거라고 가정!

 

return authenticate == true이면 <UserPage/>를 그냥 보여주고 아니면 /login으로 리다이렉트한다.

리다이랙트해주는 컴포넌트 : Navigate (useNavigate(:리액트 훅 function) 와 다름)

Navigate 컴포넌트는 리다이렉트하게 도와준다.

 

login 페이지로 리다이렉트한다. -> <Navigate to="/login"/>

 

Navigate가 /login 경로를 호출을 하게 된다. /login 경로 아래에 있는 컴포넌트 <LoginPage>를 보여준다.

 

상황에 따라서 <UserPage />를 보여주거나 아님 Navigator로 리다이렉트를 하느냐 선택!

 

 

<로그인을 안한상태>

엔터치면

 

이렇게 바뀜

false이기 때문에 계속 리다이렉트를 해서 계속 튕긴다.

 

엔터치면