处理用户角色

Question

我已经用Firebase创建了一个无服务器的React App，用于托管，数据库和用户身份验证。

现在让我们假设我扮演三个角色：学生，老师和（您猜对了）管理员。

我目前正在执行此操作以显示特定于角色的组件：

/*
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 Dev Tools并使用React Dev Tools将prop值更改为另一个。

我在定义角色和权限时使用了'Can'组件，但实际上是做同样的事情，用户可以更改传递给'Can'组件的prop来访问另一个角​​色的内容。

我考虑过的解决方案：

• 对'类型'字段使用晦涩的值，例如随机数或单词，而不是明显的老师/学生。
• 将uid的列表存储在数据库中的每个角色下，并检查当前的uid是否在该列表下，并传递隐藏在某些毫无戒心的对象中或以某种随机名称命名的某种道具。
• 创建完全不同的路由并设置重定向，以使用户没有足够的时间来更改道具或状态，因为重定向的组件已不再安装。

问题：

• 有更好的方法吗？ （必须！）
• 我是在正确的道路上吗，还是有明显的东西让我丢失了？

Answer 1

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

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

这里已经问了一个非常类似的问题How to prevent html/JavaScript code modification

Answer 2

角色在浏览器中不应超出美学原因（显示/隐藏按钮等）。您的访问控制应在功能和规则的支持下完成。

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