Comment utiliserreact-router-domCréez une route protégée et stockez la réponse dans localStorage afin que l'utilisateur puisse revoir ses détails la prochaine fois qu'il l'ouvrira. Après vous être connecté, vous devriez être redirigé vers la page du tableau de bord.
Toutes les fonctions sont ajoutées dans ContextApi.
Lien Codesandbox : Code
J'ai essayé mais je n'ai pas réussi à y arriver.
Page de routage
import React, { useContext } from "react"; import { globalC } from "./context"; import { Route, Switch, BrowserRouter } from "react-router-dom"; import About from "./About"; import Dashboard from "./Dashboard"; import Login from "./Login"; import PageNotFound from "./PageNotFound"; function Routes() { const { authLogin } = useContext(globalC); console.log("authLogin", authLogin); return ( {authLogin ? ( <> ); } export default Routes;
Page contextuelle
import React, { Component, createContext } from "react"; import axios from "axios"; export const globalC = createContext(); export class Gprov extends Component { state = { 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", data: { name: "nameFirst", email: "internetEmail", phone: "phoneHome", _repeat: 300 } }; await axios .post(`https://app.fakejson.com/q`, payload) .then((res) => { if (res.status === 200) { this.setState({ authLogin: res.data }); localStorage.setItem("loginDetail", JSON.stringify(res.data)); } }) .catch((err) => this.setState({ authLoginerror: err }) ); }; render() { // console.log(localStorage.getItem("loginDetail")); return ( {this.props.children} ); } }
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Pour la v6 :
import { Routes, Route, Navigate } from "react-router-dom"; function App() { return ( ); } function RequireAuth({ children, redirectTo }) { let isAuthenticated = getAuth(); return isAuthenticated ? children : Lien vers la documentation :https://gist.github.com/mjackson/d54b40a094277b7afdd6b81f51a0393f
Question
Switch不处理除Route和RedirectTout rendu en dehors du composant. Si vous vouliez « imbriquer » comme ceci, vous devrez alors envelopper chaque composant dans un itinéraire commun, mais cela est totalement inutile.Votre composant de connexion ne gère pas non plus la redirection vers le « domicile » ou l’itinéraire privé d’origine visité.
Solution
react-router-domv6Dans la version 6, les composants de routage personnalisés ne sont plus populaires, la méthode recommandée est d'utiliser le composant de mise en page d'authentification.
import { Navigate, Outlet } from 'react-router-dom'; const PrivateRoutes = () => { const location = useLocation(); const { authLogin } = useContext(globalC); if (authLogin === undefined) { return null; // or loading indicator/spinner/etc } return authLogin ?...
ou
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-domv5Créez un composant
PrivateRoutequi consomme votre contexte d'authentification.const PrivateRoute = (props) => { const location = useLocation(); const { authLogin } = useContext(globalC); if (authLogin === undefined) { return null; // or loading indicator/spinner/etc } return authLogin ? (Mettez à jour votre composant
Loginpour gérer les redirections de routage vers la visite d'origine.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 ( ); }Rendre tous les itinéraires dans une "liste plate"
function Routes() { return ( ); }