Reactjs和Firebase:一个用于用户和管理的登录界面，还是单独的登录界面？

Question

我正在使用reactjs和Firestore做一个学校项目，它有两个用户:用户和管理员。这些特点如下：

用户:用户注册在网站上。注册后，系统将为被扫描的用户生成QR代码。扫描后，用户的接种状态将被更新，如疫苗类型、剂量、接种日期等。用户还可以输入他们经历过的副作用，并查看疫苗接种图表报告。

管理员:管理员可以登录并扫描qr代码，查看疫苗接种图报告，疫苗(CRUD)，用户列表

• 用户和管理员都可以使用一个登录界面吗？是否存在任何安全风险或定义安全规则已经足够了？
• 还是有一个单独的登录界面更好？如果要使用单独的登录界面，我是否需要Firebase Admin SDK和Cloud函数(这里的问题是我们没有云功能的信用卡)？

Answer 1

我不知道您是如何为管理员和用户执行QR代码逻辑的，并获取所有这些细节。尽管如此，我还是想提出一个你可以遵循的方法。您可以根据角色设置身份验证，并使用为应用程序创建多个路由。

• 例如，用户应该能够访问公共登陆页面，还可以使用“注册”和“登录”页面作为身份验证的用户进入应用程序。如果对用户进行了身份验证，则可以访问受保护的页面，如帐户或管理页，而后者只能由具有管理角色的身份验证用户访问。
• 没有理由首先向未经身份验证的用户显示帐户或主页，因为这些是用户访问敏感信息的地方。在本节中，您将为这些称为授权的路由实现保护。这种保护是一种宽粒度的授权，用于检查经过身份验证的用户.如果没有人在场，它将从受保护的路由重定向到公共路由；否则，它将无所作为。该条件被定义为：

const条件= authUser => authUser != null；//短版本 const条件= authUser => !!authUser； 相反，更细粒度的授权可以是基于角色的授权或基于权限的授权。 //基于角色的授权 const条件= authUser => authUser.role === 'ADMIN'； //基于权限的授权 const条件= authUser => authUser.permissions.canEditAccount；

真正的授权逻辑发生在componentDidMount()生命周期方法中。与withAuthentication()高级组件一样，它使用Firebase侦听器在身份验证的用户每次更改时触发回调函数。通过身份验证的用户要么是authUser对象，要么是null。如果授权失败，例如，由于经过身份验证的用户为null，则高阶组件重定向到页面中的标志。如果没有失败，高级组件什么也不做，并呈现传递的组件(例如主页、帐户页)。您可以检查这个教程并了解我刚才提到的方法。

提醒一下:虽然Firebase实时数据库可以在免费的计划上使用，但是根据使用情况收费的。这就是为什么你可以设定每月配额和预算警报。您始终可以在Firebase项目的仪表板左下角看到定价计划并对其进行调整。另外，是的，云功能仍然有一个月免费津贴，这是记录在定价页面中的。但是，为了使用信用卡，您必须提供信用卡并在计费计划中使用它。你将负责支付任何每月超支。但我不认为您需要云函数，只是一些不错的db规则来保护您的数据库，基于角色和路由的应用程序的身份验证应该足够好。