Navigationseinschränkungen, um zu verhindern, dass der Browser auf meiner Konsole hängt

Question

Für die Dashboard-Seite wurde eine PrivateRoute erstellt, auf die über die URL nicht zugegriffen werden kann, wenn Sie nicht angemeldet sind. Das Aktualisieren der Dashboard-Seite führt jedoch zu einer Weiterleitung zur Authentifizierungsseite. Also habe ich einen sessionStorage hinzugefügt, aber jetzt wird beim Aktualisieren auf meiner Konsole die Meldung „Navigation drosseln, um zu verhindern, dass der Browser hängen bleibt“ angezeigt, weil er ständig auf die Seite umleitet.

//以下是代码

//App.js

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
Dashboard aus „./components/dashboard“ importieren;
Auth aus „./components/auth“ importieren;
PrivateRoute aus „./PrivateRoute“ importieren;

Funktion App() {
  zurückkehren (
    <Router>
      <Routen>
        <Route path="/signin" element={<Auth />} />
        <Route
          path="/dashboard"
          element={<PrivateRoute> <Dashboard /></PrivateRoute>}
        />
      </Routen>
    </Router>
  );
}

Standard-App exportieren;

//PrivateRoute.js

import { Navigate } from "react-router-dom";
import { auth } from „./config/firebase“;

function PrivateRoute({ children }) {
  const user = auth.currentUser;

  // 检查用户是否已经通过身份验证
  if (!user) {
    // 用户未通过身份验证，重定向到登录页面
    return <Navigate to="/signin" replacement/>;
  }

  // 用户已通过身份验证，渲染受保护的路由
  Kinder zurückgeben;
}

Standard-PrivateRoute exportieren;

//Auth.js

import { useEffect, useState } from "react";
import { useNavigate } from „react-router-dom“;
import { auth, googleProvider } from „../config/firebase“;
importieren {
  createUserWithEmailAndPassword,
  signInWithPopup,
  Abmelden,
} from „firebase/auth“;

Funktion Auth() {
  const [email, setEmail] = useState("");
  const [Passwort, setPassword] = useState("");
  const navigation = useNavigate();

  console.log(auth?.currentUser?.email);

  useEffect(()=> {
    const userFromStorage = JSON.parse(sessionStorage.getItem("user"));
    if(userFromStorage){
      console.log(userFromStorage);
      navigieren("/dashboard");
    }
  } , [navigieren]);

  const signIn = async () => {
    versuchen {
      Warten Sie auf createUserWithEmailAndPassword(auth, email, password);
      sessionStorage.setItem("user" , JSON.stringify(auth.currentUser));
      navigieren("/dashboard");
    } Catch (Err) {
      console.error(err);
    }
  };

  const signInWithGoogle = async () => {
    versuchen {
      Warten Sie auf signInWithPopup(auth, googleProvider);
      sessionStorage.setItem("user", JSON.stringify(auth.currentUser));
      navigieren("./dashboard");
    }fangen (irren) {
      console.error(err);
    }
  };

  const Logout = async () =>
    versuchen {
      Warten auf signOut(auth);
      sessionStorage.removeItem("user");
    } Catch (Err) {
      console.error(err);
    }
  };

  zurückkehren (
    <div>
      <input placeholder="email" onChange={(e) => setEmail(e.target.value)} />
      <Eingabe
        type="Passwort"
        placeholder="Passwort"
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={signIn}>anmelden</button>
      <button onClick={signInWithGoogle}>mit Google anmelden</button>
      <button onClick={Logout}>Logout</button>
    </div>
  );
};
Standard-Auth;

exportieren

Ich möchte diesen Fehler nicht haben. Wenn es als Anfänger Raum für Verbesserungen gibt, können Sie mir dies gerne mitteilen.

Answer 1

您应该异步处理身份验证状态。

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;