Restrictions de navigation pour empêcher le navigateur de se bloquer sur ma console
P粉226413256
P粉226413256 2023-08-16 08:43:57
0
1
544

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)} /> setPassword(e.target.value)} />
); } ; exporter l'authentification par défaut;

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.

P粉226413256
P粉226413256

répondre à tous (1)
P粉337385922

Vous devez gérer le statut d'authentification de manière asynchrone.

import { useEffect, useState } from 'react'; import { Navigate } from 'react-router-dom'; import { auth } from './config/firebase'; function PrivateRoute({ children }) { const [isAuthenticated, setIsAuthenticated] = useState(false); const [loading, setLoading] = useState(true); useEffect(() => { // 观察用户身份验证变化 const unsubscribe = auth.onAuthStateChanged((user) => { if (user) { setIsAuthenticated(true); } else { setIsAuthenticated(false); } setLoading(false); }); // 当组件卸载时取消订阅 return () => unsubscribe(); }, []); if (loading) return 
加载中...
; // 可选的加载指示器 if (!isAuthenticated) { return ; } return children; } export default PrivateRoute;
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!