Sekatan navigasi untuk menghalang penyemak imbas daripada tergantung pada konsol saya

Question

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 (
    <Penghala>
      <Laluan>
        <Route path="/signin" element={<Auth />} />
        <Laluan
          path="/papan pemuka"
          elemen={<Laluan Persendirian> <Papan Pemuka /></PrivateRoute>}
        />
      </Laluan>
    </Penghala>
  );
}

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 <Navigasi ke="/log masuk" ganti/>;
  }

  // 用户已通过身份验证，渲染受保护的路由
  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 (
    <div>
      <input placeholder="email" onChange={(e) => setEmail(e.target.value)} />
      <masukan
        type="kata laluan"
        pemegang tempat="kata laluan"
        onChange={(e) => setPassword(e.target.value)}
      />
      <butang onClick={signIn}>log masuk</button>
      <button onClick={signInWithGoogle}>log masuk dengan Google</button>
      <butang onClick={Logout}>Logout</button>
    </div>
  );
};
eksport Auth;

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

Answer 1

Anda harus mengendalikan status pengesahan secara tidak segerak.

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;