보호된 경로 만들기: React-Router-dom을 사용하는 방법 가이드

Question

react-router-dom을 사용하여 보호된 경로를 생성하고 응답을 localStorage에 저장하여 사용자가 다음에 열 때 세부정보를 다시 볼 수 있도록 하는 방법입니다. 로그인한 후에는 대시보드 페이지로 리디렉션되어야 합니다.

모든 기능은 ContextApi에 추가되었습니다.코드샌드박스链接：코드

我尝试过，但无法实现

路由页면

import React, "react"에서 { useContext };
"./context"에서 { globalC }를 가져옵니다.
import { Route, Switch, BrowserRouter } from "react-router-dom";
"./About"에서 정보를 가져옵니다.
"./Dashboard"에서 대시보드를 가져옵니다.
"./Login"에서 로그인 가져오기;
"./PageNotFound"에서 PageNotFound를 가져옵니다.

함수 경로() {
  const { authLogin } = useContext(globalC);
  console.log("authLogin", authLogin);

  반품 (
    <브라우저라우터>
      <스위치>
        {인증로그인? (
          <>
            <경로 경로="/dashboard" 구성요소={대시보드} 정확 />
            <경로 정확한 경로="/정보" 구성요소={정보} />
          </>
        ) : (
          <경로 경로="/" 구성요소={로그인} 정확 />
        )}

        <경로 구성요소={PageNotFound} />
      </스위치>
    </브라우저라우터>
  );
}
기본 경로 내보내기;

上下文页면

"react"에서 React, { Component, createContext } 가져오기;
"axios"에서 axios를 가져옵니다.

내보내기 const globalC = createContext();

내보내기 클래스 Gprov는 구성요소 {를 확장합니다.
  상태 = {
    인증 로그인: null,
    인증 로그인 오류: null
  };
  컴포넌트DidMount() {
    var localData = JSON.parse(localStorage.getItem("loginDetail"));
    if (로컬데이터) {
      this.setState({
        인증 로그인: localData
      });
    }
  }

  loginData = 비동기() => {
    페이로드 = {
      토큰: "ctz43XoULrgv_0p1pvq7tA",
      데이터: {
        이름: "nameFirst",
        이메일: "인터넷이메일",
        전화: "phoneHome",
        _반복: 300
      }
    };
    액시오스를 기다리다
      .post(`https://app.fakejson.com/q`, 페이로드)
      .then((res) => {
        if (res.status === 200) {
          this.setState({
            인증 로그인: res.data
          });
          localStorage.setItem("loginDetail", JSON.stringify(res.data));
        }
      })
      .catch((err) =>
        this.setState({
          인증로그인오류: 오류
        })
      );
  };
  렌더링() {
    // console.log(localStorage.getItem("loginDetail"));
    반품 (
      <globalC.Provider
        값={{
          ...이 상태,
          로그인데이터: this.loginData
        }}
      >
        {this.props.children}
      </globalC.Provider>
    );
  }
}

Answer 1

v6의 경우:

으아아아

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

Answer 2

질문

으아아아

Switch除了Route和Redirect구성 요소 외부에서는 다른 렌더링이 처리되지 않습니다. 이와 같이 "중첩"하려면 각 구성 요소를 일반 경로로 래핑해야 하지만 이는 전혀 필요하지 않습니다.

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

솔루션

react-router-domv6

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

으아아아

...

으아아아

또는

으아아아

...

으아아아

react-router-dom v5

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

으아아아

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

으아아아

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

으아아아