Sekatan navigasi untuk menghalang penyemak imbas daripada tergantung pada konsol saya-Soal Jawab Rangkaian PHP Cina

Laluan Peribadi telah dibuat untuk halaman papan pemuka, yang tidak boleh diakses melalui URL apabila tidak dilog masuk, tetapi menyegarkan halaman papan pemuka menghasilkan ubah hala ke halaman pengesahan. Jadi saya menambah sessionStorage, tetapi sekarang apabila menyegarkan ia berkata "mendikitkan navigasi untuk mengelakkan penyemak imbas daripada tergantung" pada konsol saya kerana ia terus mengubah hala ke halaman.

//以下是代码

//App.js

import { BrowserRouter as Router, Routes, Route } daripada "react-router-dom"; import Papan Pemuka daripada "./components/dashboard"; import Auth daripada "./components/auth"; import PrivateRoute daripada "./PrivateRoute"; function App() { kembali (   } />  } />   ); } eksport Apl lalai;

//PrivateRoute.js

import { Navigasi } daripada "react-router-dom"; import { auth } daripada "./config/firebase"; fungsi PrivateRoute({kanak-kanak}) { pengguna const = auth.currentUser; // 检查用户是否已经通过身份验证 jika (!pengguna) { // 用户未通过身份验证，重定向到登录页面 kembali ; } // 用户已通过身份验证，渲染受保护的路由 pulangkan kanak-kanak; } eksport PrivateRoute lalai;

//Auth.js

import { useEffect, useState } daripada "react"; import { useNavigate } daripada "react-router-dom"; import { auth, googleProvider } daripada "../config/firebase"; import { createUserWithEmailAndPassword, signInWithPopup, log keluar, } daripada "firebase/auth"; fungsi Auth () { const [e-mel, setEmail] = useState(""); const [kata laluan, setPassword] = useState(""); const navigate = useNavigate(); console.log(auth?.currentUser?.email); useEffect(()=> { const userFromStorage = JSON.parse(sessionStorage.getItem("pengguna")); if(userFromStorage){ console.log(userFromStorage); navigasi("/papan pemuka"); } } , [menavigasi]); const signIn = tak segerak () => { cuba { tunggu createUserWithEmailAndPassword(auth, e-mel, kata laluan); sessionStorage.setItem("pengguna" , JSON.stringify(auth.currentUser)); navigasi("/papan pemuka"); } tangkap (err) { console.error(err); } }; const signInWithGoogle = async () => { cuba { tunggu signInWithPopup(auth, googleProvider); sessionStorage.setItem("pengguna", JSON.stringify(auth.currentUser)); navigasi("./papan pemuka"); }tangkap (err) { console.error(err); } }; const Log Keluar = tak segerak () => cuba { tunggu signOut(auth); sessionStorage.removeItem("pengguna"); } tangkap (err) { console.error(err); } }; kembali (   setEmail(e.target.value)} />  setPassword(e.target.value)} /> log masuk  Logout 
 ); }; eksport Auth;

Tidak mahu ralat ini, sebagai pemula, jika ada ruang untuk penambahbaikan, sila beritahu saya.

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;