보호된 경로 만들기: React-Router-dom을 사용하는 방법 가이드
<p><code>react-router-dom</code>을 사용하여 보호된 경로를 생성하고 응답을 localStorage에 저장하여 사용자가 다음에 열 때 세부정보를 다시 볼 수 있도록 하는 방법입니다. 로그인한 후에는 대시보드 페이지로 리디렉션되어야 합니다. </p>
<p>모든 기능은 ContextApi에 추가되었습니다.코드샌드박스链接：코드</p>
<p>我尝试过，但无法实现</p>
<p>路由页면</p>
<pre class="brush:php;toolbar:false;">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} />
</스위치>
</브라우저라우터>
);
}
기본 경로 내보내기;</pre>
<p>上下文页면</p>
<pre class="brush:php;toolbar:false;">"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>
);
}
}</pre>
<p><br /></p>
