在本文中，您将学习如何在React应用程序中正确地实现基于角色的访问控制（RBAC）。首先，您将简要了解什么是授权和身份验证。然后，您将看到一个在保护React应用程序时经常使用的天真策略。最后，您将了解RBAC是什么，请参阅工作示例，了解是什么使它成为更好的策略，以及如何在React中实现它。所有代码都可以在这个GitHub存储库中找到。"了解如何使用基于角色的访问控制策略处理React应用程序中的授权。"在推特上留言基于角色的访问控制简介网络应用无处不在，许多任务现在可以在前端执行。但是，并非所有任务都应该对每个用户可用，因为每个用户都是唯一的，并且执行不同的角色。有些用户是具有特殊权限的管理员，有些是普通用户，还有一些只是访问者（未经验证）。Web应用程序应该足够聪明，能够区分不同类型的用户角色。基于角色的访问控制（RBAC）是一种非常流行的方法。本文将作为RBAC的指南，并解释如何使用Auth0和新的React上下文在React应用程序中实现RBAC。什么是授权和身份验证授权是开发人员控制用户对信息的访问并限制用户可以执行的操作的过程。经过身份验证的用户是以某种方式（例如，通过一组凭据）标识自己的用户。身份验证不处理访问控制。这就是授权参与的地方。没有适当的授权，用户可以在应用程序中造成严重破坏。作者可以删除其他作者的文章或更改其密码。这就是为什么授权和身份验证一样重要。React应用程序的授权范围由于许多繁重的提升现在是在客户端（在单页应用程序上）执行的，所以授权的范围现在比以往任何时候都要大。可靠的授权系统必须：限制执行的AJAX请求（即使后端得到了适当的保护，避免它也会为您节省资金）。拒绝访问某些客户端路由。显示或隐藏某些UI片段。假设您正在构建下一个媒体（博客应用程序）。当用户访问他们的配置文件页面时，你应该保证只有他们能看到editprofile按钮，其他人只能看到他们目前发布的文章。在React应用程序中实现授权为了了解React应用程序中的授权，在本文中，您将构建一个简单的博客应用程序。你不会浪费时间去实现对这个主题不重要的特性（比如后端），所以你可以专注于重要的事情：学习如何在React应用程序中正确地实现RBAC。然而，在学习正确的实现之前，您将看到开发人员通常会做些什么，以便您能够识别差距和机会。首先，你的博客应用程序将有以下要求：主页和仪表板页面。主页将是一个公共页面，任何人都可以访问并查看到目前为止发布的所有帖子。Dashboard页面将显示登录的用户详细信息和他们编写的所有帖子的列表。该页面只能由作者和管理员访问。作者只能编辑他们的帖子，但是管理员可以编辑和删除任何帖子。要实现这一点，您需要对用户进行身份验证并为其分配角色。根据角色，应用程序将决定是否应呈现"编辑"和"删除"按钮。同样，如果用户没有登录，你的应用程序会将用户从仪表板路由重定向到主路由。为了简化这个过程，您将使用Auth0在React应用程序中快速添加身份验证，而不需要任何后端。注意：本教程中的内容不依赖于Auth0。因此，如果您已经有了一个身份验证系统，并且只想了解关于授权和RBAC的更多信息，可以跳过下一节。搭建React应用程序为了了解全局并了解RBAC的作用，您将从头开始创建一个React应用程序。幸运的是，使用create react app工具，您可以非常快速地完成：npx create react app rbac教程应用程序注意：上面的命令取决于净现值@5.2.0。如果您的计算机中没有安装Node和NPM，请检查此页。如果您有以前的版本，则必须先在全局范围内安装create react app。现在，移动到创建react app created的目录，并运行以下命令：#进入你的新项目cd-rbac教程应用程序#然后移到src目录cd-src公司#删除不需要的文件林吉特应用程序jsApp.test.js版应用程序.css索引.css徽标.svg服务工人.js#创造出你要用的mkdir组件页面触摸页面/仪表板.js页数/主页.js您将得到的目录结构包含一个组件目录，该目录将保存所有可重用组件。此外，它还包含一个名为pages的目录，每个路由有一个文件（即。，仪表板.js以及主页.js).现在，您将安装React Router，以便在应用程序中轻松处理路由。因此，请转到rbac教程应用程序并安装react router和react router dom：#移动到rbac教程应用程序cd。。#并安装两个库npm安装react路由器react router dom接下来，打开src/索引.js在首选的IDE中文件，并将其代码替换为以下代码：从"React"导入React；从"react-dom"导入ReactDOM；从"react Router dom"导入{BrowserRouter as Router，Route，Switch}；从'./pages/home'导入主页；从"./pages/dashboard"导入DashboardPage；功能应用程序（）{返回(