So verwenden Sie react-router-dom, um eine geschützte Route zu erstellen und die Antwort in localStorage zu speichern, damit der Benutzer seine Details beim nächsten Öffnen erneut anzeigen kann. Nach der Anmeldung sollten sie zur Dashboard-Seite weitergeleitet werden.
Alle Funktionen werden in ContextApi hinzugefügt.
Codesandbox-Link: Code
Ich habe es versucht, konnte es aber nicht zum Laufen bringen.
路由页面
import React, { useContext } from "react"; import { globalC } from "./context"; import { Route, Switch, BrowserRouter } aus „react-router-dom“; import About from „./About“; Dashboard aus „./Dashboard“ importieren; Login importieren von „./Login“; importiere PageNotFound aus „./PageNotFound“; Funktion Routes() { const { authLogin } = useContext(globalC); console.log("authLogin", authLogin); zurückkehren ( {authLogin ? ( <> ); } Standardrouten exportieren; 上下文页面
import React, { Component, createContext } from "react"; Axios aus „axios“ importieren; export const globalC = createContext(); Die Exportklasse Gprov erweitert Component { Zustand = { authLogin: null, authLoginerror: null }; ComponentDidMount() { var localData = JSON.parse(localStorage.getItem("loginDetail")); if (localData) { this.setState({ authLogin: localData }); } } loginData = async () => { let payload = { Token: „ctz43XoULrgv_0p1pvq7tA“, Daten: { Name: „nameFirst“, E-Mail: „internetEmail“, Telefon: „phoneHome“, _Wiederholung: 300 } }; warte auf Axios .post(`https://app.fakejson.com/q`, Nutzlast) .then((res) => { if (res.status === 200) { this.setState({ authLogin: res.data }); localStorage.setItem("loginDetail", JSON.stringify(res.data)); } }) .catch((err) => this.setState({ authLoginerror: Fehler }) ); }; render() { // console.log(localStorage.getItem("loginDetail")); zurückkehren ( {this.props.children} ); } } 
对于v6：
import { Routes, Route, Navigate } from "react-router-dom"; function App() { return ( ); } function RequireAuth({ children, redirectTo }) { let isAuthenticated = getAuth(); return isAuthenticated ? children : 链接到文档：https://gist.github.com/mjackson/d54b40a094277b7afdd6b81f51a0393f
问题
Switch除了Route和Redirect组件之外，不处理任何其他渲染。如果您想要像这样“嵌套”，那么您需要将每个组件包装在通用路由中，但这是完全不必要的。您的登录组件也没有处理重定向回原始访问的“主页”或私有路由。
解决方案
react-router-domv6在版本6中，自定义路由组件已经不再受欢迎，首选方法是使用auth布局组件。
import { Navigate, Outlet } from 'react-router-dom'; const PrivateRoutes = () => { const location = useLocation(); const { authLogin } = useContext(globalC); if (authLogin === undefined) { return null; // 或者加载指示器/旋转器等 } return authLogin ?...
或者
const routes = [ { path: "/", element:...
export default function Login() { const location = useLocation(); const navigate = useNavigate(); const { authLogin, loginData } = useContext(globalC); useEffect(() => { if (authLogin) { const { from } = location.state || { from: { pathname: "/" } }; navigate(from, { replace: true }); } }, [authLogin, location, navigate]); return ( ); }react-router-domv5创建一个消费您的auth上下文的
PrivateRoute组件。const PrivateRoute = (props) => { const location = useLocation(); const { authLogin } = useContext(globalC); if (authLogin === undefined) { return null; // 或者加载指示器/旋转器等 } return authLogin ? (更新您的
Login组件以处理重定向回原始访问的路由。export default function Login() { const location = useLocation(); const history = useHistory(); const { authLogin, loginData } = useContext(globalC); useEffect(() => { if (authLogin) { const { from } = location.state || { from: { pathname: "/" } }; history.replace(from); } }, [authLogin, history, location]); return ( ); }将所有路由呈现为“平面列表”
function Routes() { return ( ); }