Reactjs 处理用户角色

我用Firebase创建了一个无服务器的React应用程序，用于托管、数据库和用户身份验证

现在让我们假设我有三个角色：学生、老师和（你猜到了）管理员

我目前这样做是为了显示特定于角色的组件：

/*
Get user data from the database which has a 'type' field with one of the above values, 
then in a child render function :
*/

{this.props.userData.type === 'student' &&
    //Show components for students
}
{this.props.userData.type === 'teacher' &&
    //Show components for teacher
}

现在，在我看来，用户可以打开Chrome开发工具并使用React开发工具将prop值更改为其他值之一

我遇到过通过定义角色和权限来使用“Can”组件的情况，但这基本上做了相同的事情，用户可以更改传递给“Can”组件的道具以访问另一个角色的内容

我考虑过的解决方案：

• 对“类型”字段使用模糊值，如随机数或单词，而不是明显的教师/学生
• 在数据库中的每个角色下存储uid列表，并检查列表下是否存在当前uid，并传递隐藏在某个不知情对象或随机名称下的某些道具，诸如此类
• 创建完全不同的路由并设置重定向，这样用户就没有足够的时间更改道具或状态，因为重定向的组件已不再安装

问题：

• 有没有更好的方法来构造我的应用程序，这样我就不必使用状态或道具来识别用户类型
• 我走的是正确的道路，还是有什么明显的东西让我错过了

编辑：

---

我知道我无法阻止用户编辑组件的状态或道具。答案建议我在服务器上验证用户类型，以检查用户是否可以执行操作。在我当前的设置中，有什么方法可以实现这一点（见第一行）？或者是否有必要拥有一个

server.js

？

访问者将始终能够以某种方式“黑客”您的前端应用程序（例如，通过更改React-Dev工具中的道具或任何其他方式）

web完全可以这样工作，因为您的所有主要逻辑都应该位于后端，在那里您可以实际防止某些操作发生

---

这里提出了一个非常类似的问题

访问者将始终能够以某种方式“黑客”您的前端应用程序（例如，通过更改React Dev Tools中的道具或以任何其他方式）

web完全可以这样工作，因为您的所有主要逻辑都应该位于后端，在那里您可以实际防止某些操作发生

---

这里提出了一个非常类似的问题

除了美观原因（显示/隐藏按钮等），浏览器中的角色不应该重要。您的访问控制应该在有函数和规则支持的环境中完成

---

任何恶意用户都可以编辑HTML，或发送HTTP请求以假装他们有角色。但是，在后端，您应该检查

用户id

是否实际具有该角色，并拒绝运行您不应该运行的代码。

角色在浏览器中的重要性不应超出美观原因（显示/隐藏按钮等）。您的访问控制应该在有函数和规则支持的环境中完成

---

任何恶意用户都可以编辑HTML，或发送HTTP请求以假装他们有角色。但是，在后端，您应该检查

用户id

是否实际具有该角色，并拒绝运行您不应该运行的代码。

这是否回答了您的问题？这回答了你的问题吗？如果我在对数据库进行更改之前检索“type”字段并检查它（如

handleSubmit（）

函数中），它会工作吗？我没有服务器代码，我想它不可能是气密的，但如果用户试图破坏应用程序，我只是不想让它变得那么容易。如果您使用firestore托管数据，您可以制定安全规则：如果我检索“类型”字段并在更改数据库（如

handleSubmit（）

函数）之前检查它是否有效？我没有服务器代码，我想它不可能是气密的，但我只是不想让用户在尝试破坏应用程序时变得那么容易。如果你使用firestore托管数据，你可以有安全规则：我之前在搜索解决方案，遇到了链接问题。我知道我无法阻止用户编辑状态/道具。但鉴于我本身没有后端，我想知道我是否可以对我当前的应用程序做些什么，以使用户难以（如果不是不可能的话）执行未经授权的操作。我之前在搜索解决方案时遇到了相关问题。我知道我无法阻止用户编辑状态/道具。但鉴于我本身没有后端，我想知道我是否可以对我当前的应用程序做些什么，让用户难以（如果不是不可能的话）执行未经授权的操作。