如何将我的网页上的某些路径限制为管理员？[React，用于身份验证的Firebase ]

import React, { useEffect, useState } from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import firebase from 'firebase/app';
import 'firebase/auth';

// 初始化Firebase
const firebaseConfig = {
  // Firebase配置信息
};

firebase.initializeApp(firebaseConfig);

// 登录页面
function Login({ setAdmin }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      // 使用Firebase SDK进行身份验证
      await firebase.auth().signInWithEmailAndPassword(email, password);
      setAdmin(true);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">Login</button>
    </form>
  );
}

// 私有路由组件，用于限制管理员访问
function PrivateRoute({ component: Component, admin, ...rest }) {
  return (
    <Route
      {...rest}
      render={(props) =>
        admin ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
}

// 需要管理员访问的页面
function AdminPage() {
  return <h1>Admin Page</h1>;
}

// 应用程序
function App() {
  const [admin, setAdmin] = useState(false);

  useEffect(() => {
    // 监听Firebase身份验证状态变化
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        setAdmin(true);
      } else {
        setAdmin(false);
      }
    });
  }, []);

  return (
    <Router>
      <Route
        path="/login"
        render={(props) => <Login setAdmin={setAdmin} />}
      />
      <PrivateRoute
        path="/admin"
        component={AdminPage}
        admin={admin}
      />
    </Router>
  );
}

export default App;