찾다

 >  Q&A  >  본문

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

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

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

코드샌드박스 링크: 코드

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

라우팅 페이지

으아아아

컨텍스트 페이지

으으으으

P粉156983446P粉156983446464일 전636

모든 응답(2)나는 대답할 것이다

  • P粉122932466

    P粉1229324662023-09-22 12:07:30

    v6의 경우:

    으아아아

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

    회신하다
    0
  • P粉587780103

    P粉5877801032023-09-22 00:11:42

    질문

    으아악

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

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

    솔루션

    react-router-domv6

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

    으아악

    ...

    으아악

    또는

    으아악

    ...

    으아악

    react-router-dom v5

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

    으아악

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

    으아악

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

    으아악

    회신하다
    0
  • 취소회신하다