React-Router-dom을 사용하여 보안 경로 생성

Question

사용 방법 react-router-dom사용자가 다음에 열 때 세부 정보를 다시 볼 수 있도록 보호된 경로를 만들고 응답을 localStorage에 저장합니다. 로그인하면 대시보드 페이지로 리디렉션됩니다.

모든 기능은 ContextApi에 추가되었습니다.

코드샌드박스 링크: 코드

노력했지만 성공하지 못했습니다.

라우팅 페이지

으아아아

컨텍스트 페이지

으으으으

Answer 1

v6의 경우:

으아아아

문서 링크: https://gist.github.com/mjackson/d54b40a094277b7afdd6b81f51a0393f

Answer 2

질문

으아악

Switch不处理除Route和Redirect구성 요소 외부의 모든 렌더링. 이와 같이 "중첩"하려면 각 구성 요소를 공통 경로로 래핑해야 하지만 이는 전혀 필요하지 않습니다.

귀하의 로그인 구성 요소는 원래 방문한 "홈" 또는 개인 경로로의 리디렉션도 처리하지 않습니다.

솔루션

react-router-domv6

버전 6에서는 사용자 정의 라우팅 구성 요소가 더 이상 인기가 없으므로 인증 레이아웃 구성 요소를 사용하는 것이 좋습니다.

으아악

...

으아악

또는

으아악

...

으아악

react-router-dom v5

인증 컨텍스트를 사용하는 PrivateRoute 구성 요소를 만듭니다.

으아악

원래 방문으로 다시 라우팅 리디렉션을 처리하려면 Login 구성요소를 업데이트하세요.

으아악

모든 경로를 "플랫 목록"으로 렌더링

으아악