处理用户角色

Question

我使用 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？

Answer 1

访问者总是能够以某种方式“破解”您的前端应用程序（例如，通过更改 React 开发工具中的道具或以任何其他方式）。

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

在这里How to prevent html/JavaScript code modification提出了一个非常相似的问题

Answer 2

除了审美原因（显示/隐藏按钮等）之外，浏览器中的角色应该无关紧要。您的访问控制应该在功能和规则的支持下完成。

任何恶意用户都可以编辑 HTML，或发送 HTTP 请求以假装自己有角色。但是，在后端，您应该检查 user-id 是否确实具有该角色并拒绝运行您不应该运行的代码。