使用 firebase 在 React 中保護路由

Question

`` 我正在使用 firebase 身份驗證登錄用戶，然后將角色信息存儲在實時數據庫中。 如果具有管理員角色的用戶登錄該站點，那么他們應該能夠訪問“/home”路由，但我不能這樣做。

應用程序.js

import "./App.css";

import React from "react";
import { Route, Routes, Navigate } from "react-router-dom";

import Landing from "./components/Landing";
import PhoneDetails from "./components/PhoneDetails";
import Home from "./components/Home/App.jsx";
import Signup from "./components/Signup";
import SignIn from "./components/Signin";
import ForgotPassword from "./components/ForgotPassword";

import { auth } from "./firebase-config.js";
import { useEffect } from "react";
import FirebaseData from "./firebaseData";

function App() {
  document.body.style = "background: #F8F5FA;";

  // getting the user data from firebase
  const firebaseData = FirebaseData();

  const [displayName, setDisplayName] = React.useState("");
  const [isAuthenticated, setIsAuthenticated] = React.useState(false);
  const [role, setRole] = React.useState("");

  useEffect(() => {
    if (firebaseData) {
      auth.onAuthStateChanged((user) => {
        if (user) {
          // User is signed in
          // ...
          setIsAuthenticated(true);
          setDisplayName(user.displayName);
          setRole(firebaseData.users?.[user.uid]?.role);
        } else {
          // User is signed out
          // ...
          setIsAuthenticated(false);
          setDisplayName("");
          setRole("");
        }
      });
    }
  }, [firebaseData]);

  console.log("isAuthenticated:", isAuthenticated);
  console.log("displayName:", displayName);
  console.log("role:", role);

  return (
    <Routes>
      <Route
        path="/"
        exact
        element={
          <Home
            isAuthenticated={isAuthenticated}
            displayName={displayName}
            role={role}
          />
        }
      />
      <Route path="/signup" element={<Signup />} />
      <Route path="/signin" element={<SignIn />} />
      <Route path="/forgot-password" element={<ForgotPassword />} />

      <Route
        path="/home"
        element={
          isAuthenticated && role === "admin" ? (
            <Landing />
          ) : (
            <Navigate replace to="/" />
          )
        }
      />

      <Route
        path="/details"
        element={
          isAuthenticated && role === "admin" ? (
            <PhoneDetails />
          ) : (
            <Navigate replace to="/" />
          )
        }
      />
      <Route path="/" element={<Navigate replace to="/" />} />
    </Routes>
  );
}

export default App;

下面給出的是我正在獲取的實時數據文件

firebaseData.js

import {database} from "./firebase-config";
import React from "react";
import {ref, onValue} from "firebase/database";
import {useEffect} from "react";

const db = database;

export default function FirebaseData() {
    const [data, setData] = React.useState(null);

    useEffect(() => {
        onValue(ref(db), (snapshot) => {
            setData(snapshot.val());
        });
    }, []);
    return data;

}

我正在檢查身份驗證狀態，並在控制台日志中獲取角色，但是當我路由到 /home 時，我被重定向到 / 路由。 我知道由於 useEffect 掛鈎，我沒有立即從數據庫中獲取數據，我該如何解決這個問題？

Answer 1

當用戶是管理員時，我假設角色='admin'，那么你可以這樣做

 <Routes>
  <Route
    path="/"
    exact
    element={
      <Home
        isAuthenticated={isAuthenticated}
        displayName={displayName}
        role={role}
      />
    }
  />
  <Route path="/signup" element={<Signup />} />
  <Route path="/signin" element={<SignIn />} />
  <Route path="/forgot-password" element={<ForgotPassword />} />
    {
     role==='admin' && <Route
    path="/home"
    element={
      isAuthenticated && role === "admin" ? (
        <Landing />
      ) : (
        <Navigate replace to="/" />
      )
    }
  />
 }
  
  <Route
    path="/details"
    element={
      isAuthenticated && role === "admin" ? (
        <PhoneDetails />
      ) : (
        <Navigate replace to="/" />
      )
    }
  />
  <Route path="/" element={<Navigate replace to="/" />} />
</Routes>

對於 admin 以外的角色，它將落入默認路由。