如何在 ReactJS 中某些条件为真时显示组件？

Question

这个赏金已经结束。 这个问题的答案有资格获得+50声望奖励。 赏金宽限期将在19 小时后结束。 ReactPotato想引起更多人对这个问题的关注：

我希望可以选择查看与普通用户可以看到的不同的东西（管理员视图）（用户视图），我虽然使用布尔值（isAdmin）根据我是否是管理员来锁定路由，但到目前为止还没有不工作，所以我希望更多人看到我的问题，这样我才能得到我需要的帮助。

我想要达到的目标

根据用户权限 admin/!admin 显示组件

//每个人都可以看到这个登录/注册/重置

//管理员x路径

//普通用户y路径

我一直在寻找逐步正确解释我想要实现的目标的教程时遇到问题Firebase 身份验证教程）而不是在反应中，我无法在某个时候“翻译”代码以做出反应，所以我卡住了它是关于自定义声明（就像 4 个视频，还有更多但解释身份验证的视频）东西是 17-21）我试图理解它，但它对我来说太复杂了也尝试进入Firebase Security以尝试查看我是否可以做管理工作但也没有成功但是有人提到了那么如果你只需在您的 Firebase 中添加一个值“isAdmin”并将其设置为 true，w/e 将成为 admin，然后其他任何人在注册时都是 false，这听起来很简单。

基本上我想要这个视图（只有这个）给管理员，他们基本上可以看到所有用户订单的详细信息：

虽然用户可以创建/编辑/删除“学生”（基本上是他们的孩子），但他们也可以创建和查看/编辑/删除自己的订单

完整代码，基于 sugestion由于某种原因，我尝试了这个之后什么也做不了，所以我愿意接受其他建议

import React, { useEffect, useState } from "react";
import "./App.css";
import Register from "./Register";
import { auth, db } from "./firebase";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
import Login from "./Login.js";
import Inicio from "./Inicio";
import Reset from "./Reset";
import CrearEstudiante from "./CrearEstudiante";
import Estudiantes from "./ListadoEstudiantes"
import Pedidos from "./ListadoPedidos"
import CrearPedidos from "./CrearPedidos";
import AgregarLibro from "./AgregarLibro";
import AgregarAIB from "./AgregarAIB";
import AgregarOpcionales from "./AgregarOpcionales";
import Comprar from "./Comprar";
import VerPedidos from "./VerPedidos";
import UpdateProfile from "./UpdateProfile";
import EditForm from "./EditForm";
import DBLibros from "./DBLibros";
import DBDiccionarios from "./DBDiccionarios";
import DBLocal from "./DBLocal";

function App() {

  const [user, setUser] = useState([]);
  const [isAdmin, setIsAdmin] = useState(false);

  useEffect(() => {
    auth.onAuthStateChanged((authUser) => {

      if (authUser) {
        setUser(authUser);
      } else {
        setUser(false);
      }
    })
  }, [user])

  useEffect(() => {
    const userDoc = db.collection('usuarios').doc(user.uid);
    userDoc.get().then(doc => {
        if (doc.exists) {
            const tempData = [];
            const data = doc.data();
            tempData.push(data);
            setIsAdmin(tempData[0].isAdmin)
        }
      });
 }, [user])

 useEffect(() => {
  if(isAdmin === true){
    console.log("I'm an admin")
    console.log(isAdmin)
    console.log(user.uid)
  }
  else {
    console.log("No admin")
    console.log(isAdmin)
    console.log(user.uid)
  }
 }, [isAdmin])

  return (
    < div className="app" >
        <Router>
        <Switch>

        {isAdmin && (
            <>
          <Route path = "/Agregar_Libros">
            <Inicio user={user}/>
            <AgregarLibro />
          </Route>

          <Route path = "/Agregar_AIB">
            <Inicio user={user}/>
            <AgregarAIB />
          </Route>

          <Route path = "/Agregar_Opcional">
            <Inicio user={user}/>
            <AgregarOpcionales />
          </Route>

          <Route path = "/DB_Libros">
            <Inicio user={user}/>
            <DBLibros />
          </Route>

          <Route path = "/DB_Diccionarios">
            <Inicio user={user}/>
            <DBDiccionarios />
          </Route>

          <Route path = "/DB_Local">
            <Inicio user={user}/>
            <DBLocal />
          </Route>
          </>
          )}
          
          {!isAdmin && (
            <>
          <Route path = "/Inicio">
            <Inicio user={user}/>
            <Estudiantes user={user} />
            <Pedidos user={user} />
          </Route>

          <Route path = "/Profile">
            <Inicio user={user}/>
            <UpdateProfile user={user}/>
          </Route>

          <Route path = "/Editar_Estudiante">
            <Inicio user={user}/>
            <EditForm user={user}/>
          </Route>

          <Route path = "/Crear_Estudiante">
            <Inicio user={user}/>
            <CrearEstudiante user={user}/>
          </Route>

          <Route path = "/Crear_Pedidos">
            <Inicio user={user}/>
            <CrearPedidos user={user}/>
          </Route>
          
          <Route path = "/Comprar">
            <Inicio user={user}/>
            <Comprar user={user}/>
          </Route>

          <Route path = "/Ver_Pedidos">
            <Inicio user={user}/>
            <VerPedidos user={user}/>
          </Route>
          </>
          )}
          
          <Route path = "/Register">
            <Register/>
          </Route>

          <Route path = "/Reset">
            <Reset />
          </Route>

          <Route path = "/">
            <Login/>
          </Route>

        </Switch>
        </Router>
      </div >
  );
}
export default App;

当我有这样的时候，我看不到注册、重置或登录（在这种情况下是 Path = "/"），这很大程度上取决于我设置路由的顺序，这很奇怪。

Answer 1

这通常是通过使用逻辑运算符和三元组来完成的。 在您的情况下，逻辑 AND 运算符应该可以工作：

return (
    < div >
      < div className="app" >
        <Router>
        <Switch>

          //Admin 
          /*
          {isAdmin && (
            <>
              <Route path = "/Agregar_Libro">
                <Inicio user={user}/>
                <AgregarLibro />
              </Route>

              ....
            </>
          )}
          */

          //Anyone since you are LogOut 
          /*
          <Route path = "/Register">
            <Register/>
          </Route>
          
          <Route path = "/Reset">
            <Reset />
          </Route> 

          <Route path = "/">
            <Login/>
          </Route>
           */

          //Users
          /*
          {!isAdmin && (
            <>
              <Route path = "/Inicio">
                <Inicio user={user}/>
                <Estudiantes user={user} />
                <Pedidos user={user} />
              </Route>
              
              ....
            </>
          )}
          */

        </Switch>
        </Router>
      </div >
    </div >
  );
}

export default App;

Answer 2

我建议做的是实现根据您拥有的权限有条件地进行渲染的组件。

例如

const CheckIsAdmin = ({children})=>{
  const permissions = useUserPermissions()
  
  if(permissions === "admin"){
  
    return <>{children}</>
  }
  
  return <> You don't have permissions for this</>
}

Answer 3

首先，我猜这将创建一个检查用户的无限循环。

 useEffect(() => {
    auth.onAuthStateChanged((authUser) => {

      if (authUser) {
        setUser(authUser);
      } else {
        setUser(false);
      }
    })
  }, [user]) //  Don't need to provide "user" here.

对于您的问题， 如何限制对 react-router 中路由的访问？ 检查此链接中的答案，这可能会给您一个想法。