Un PrivateRoute a été créé pour la page du tableau de bord, qui n'est pas accessible via l'URL lorsque vous n'êtes pas connecté, mais l'actualisation de la page du tableau de bord entraîne une redirection vers la page d'authentification. J'ai donc ajouté un sessionStorage, mais maintenant, lors de l'actualisation, il est indiqué "limitation de la navigation pour empêcher le navigateur de se bloquer" sur ma console car il continue de rediriger vers la page.
//以下是代码
//App.js
import { BrowserRouter as Router, Routes, Route } from "react-router-dom" ; importer le tableau de bord depuis "./components/dashboard" ; importer l'authentification depuis "./components/auth" ; importer PrivateRoute depuis "./PrivateRoute" ; fonction App() { retour (); } exporter l'application par défaut ; } /> } />
//PrivateRoute.js
import { Navigate } from "react-router-dom" ; importer { auth } depuis "./config/firebase" ; function PrivateRoute({ enfants }) { const utilisateur = auth.currentUser ; // 检查用户是否已经通过身份验证 si (!utilisateur) { // 用户未通过身份验证,重定向到登录页面 return; } // 用户已通过身份验证,渲染受保护的路由 rendre les enfants ; } exporter PrivateRoute par défaut;
//Auth.js
import { useEffect, useState } from "react" ; importer { useNavigate } depuis "react-router-dom" ; importer { auth, googleProvider } depuis "../config/firebase" ; importer { createUserWithEmailAndPassword, connectez-vousAvecPopup, se déconnecter, } depuis "firebase/auth" ; fonction Auth() { const [email, setEmail] = useState(""); const [mot de passe, setPassword] = useState(""); const naviguer = useNavigate(); console.log(auth?.currentUser?.email); useEffect(()=> { const userFromStorage = JSON.parse(sessionStorage.getItem("user")); si (utilisateurFromStorage) { console.log(userFromStorage); naviguer("/tableau de bord"); } } , [naviguer]); const signIn = async () => { essayer { wait createUserWithEmailAndPassword(auth, email, password); sessionStorage.setItem("user" , JSON.stringify(auth.currentUser)); naviguer("/tableau de bord"); } attraper (erreur) { console.erreur(erreur); } } ; const signInWithGoogle = async () => { essayer { attendre signInWithPopup (auth, googleProvider); sessionStorage.setItem("user", JSON.stringify(auth.currentUser)); naviguer("./tableau de bord"); }attraper (erreur) { console.erreur(erreur); } } ; const Déconnexion = async () => essayer { attendre la déconnexion (auth); sessionStorage.removeItem("utilisateur"); } attraper (erreur) { console.erreur(erreur); } } ; retour (setEmail(e.target.value)} />); } ; exporter l'authentification par défaut;setPassword(e.target.value)} />
Je ne veux pas de cette erreur, en tant que débutant, s'il y a place à amélioration, n'hésitez pas à me le faire savoir.
Vous devez gérer le statut d'authentification de manière asynchrone.