【发布时间】：2021-12-08 16:04:25
【问题描述】：
我想要达到的目标
根据用户权限admin/!admin显示组件
//每个人都可以看到这个 登录/注册/重置
//管理员 x 路径
//普通用户 y个路径
我在查找教程时遇到问题，这些教程可以逐步正确解释我想要实现的目标在 vue (Firebase Auth Tutorial) 中而不是在反应中，我无法“翻译”代码在某些时候做出反应，所以我被卡住了，它大约是 Custom Claims（就像 4 个视频，还有更多但那些说明 auth 的东西是 17-21）我试图理解它，但它对我来说太复杂了，我也尝试进入 Firebase Security 尝试看看我是否可以做管理员的事情，但也没有成功，但是有人提到那么如果你只是简单地在你的firebase中添加一个值“isAdmin”并将其设置为true，w/e将会是管理员，然后其他任何人在注册时都是假的，这听起来很简单。
基本上我想要管理员的这个视图（只有这个），基本上他们可以看到所有用户订单的详细信息：
虽然用户可以创建/编辑/删除“学生”（基本上是他们的孩子），但他们也可以创建和查看/编辑/删除自己的订单
完整代码，基于建议出于某种原因，在尝试此操作后我什么都做不了，所以我愿意接受其他建议
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;
当我这样设置时，我看不到注册、重置或登录（在本例中为路径 =“/”），这在很大程度上取决于我设置路线的顺序，这很奇怪。
【问题讨论】：
标签： javascript reactjs firebase google-cloud-firestore firebase-authentication