Restrictions de navigation pour empêcher le navigateur de se bloquer sur ma console

Question

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 (
    <Routeur>
      <Itinéraires>
        <Route path="/signin" element={<Auth />} />
        <Itinéraire
          chemin="/tableau de bord"
          element={<PrivateRoute> <Tableau de bord /></PrivateRoute>}
        />
      </Itinéraires>
    </Routeur>
  );
}

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 <Navigate to="/signin" replace/>;
  }

  // 用户已通过身份验证，渲染受保护的路由
  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 (
    <div>
      <input placeholder="email" onChange={(e) => setEmail(e.target.value)} />
      <entrée
        type="mot de passe"
        placeholder="mot de passe"
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={signIn}>se connecter</button>
      <button onClick={signInWithGoogle}>se connecter avec Google</button>
      <button onClick={Déconnexion}>Déconnexion</bouton>
    </div>
  );
} ;
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.

Answer 1

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 <div>加载中...</div>; // 可选的加载指示器

  if (!isAuthenticated) {
    return <Navigate to="/signin" replace />;
  }

  return children;
}

export default PrivateRoute;