ReactJS 是一种流行的 JavaScript 库，用于构建用户界面。React Router 是一个用于 React 应用程序的常用路由器，它允许您将应用程序分解为多个独立页面和视图。
在某些情况下，您可能需要对这些页面和视图进行授权才能访问它们。本文将介绍如何使用 React Router 实现路由器授权，并提供一个示例代码来帮助您更好地理解概念。
什么是路由器授权？
路由器授权是指在 React 应用程序中限制对特定路由或视图的访问。这可以通过验证用户身份、检查角色或权限等实现。
例如，在一个简单的社交媒体应用程序中，只有登录用户才能访问他们的个人资料页面。如果未经授权的用户尝试访问该页面，则应将其重定向到登录页面。
如何实现路由器授权？
React Router 具有内置的路由器授权功能，使得实现路由器授权变得非常简单。
步骤1：安装 React Router
要使用 React Router，首先需要安装它。您可以使用 npm 或者 yarn 安装，例如：
--- ------- ----------------
步骤2：创建私有路由组件
接下来，我们将创建一个私有路由组件，该组件将负责检查用户是否已登录，并只允许已登录的用户访问特定的路由或视图。以下是一个简单示例：
------ ----- ---- --------
------ - ------ -------- - ---- -------------------
----- ------------ - -- ---------- ---------- ---------------- ------- -- -- -
------ --------- --------------- -- -
--------------- --- ----
- ---------- ---------- --
- --------- ----------- --
-- --
--
------ ------- -------------这个私有路由组件接受三个属性：component、isAuthenticated 和 ...rest。
component是要渲染的组件。isAuthenticated是一个布尔值，指示用户是否已登录。...rest包含任何其他传递给路由器的属性。
在这个组件中，我们使用 render 方法来确定应该呈现哪个组件。如果用户已经通过身份验证，则将呈现传递给组件属性的组件。否则，我们将用户重定向到登录页面。
步骤3：使用私有路由组件
现在，我们可以开始使用这个私有路由组件了。在您的应用程序中，将所有需要进行授权的路由包装在 <PrivateRoute> 组件中，例如：
------ ----- ---- --------
------ - ------------- -- ------- ------- ----- - ---- -------------------
------ ------------ ---- -----------------
------ ---- ---- ---------
------ ------- ---- ------------
------ ----- ---- ----------
----- --- - -- -- -
----- --------------- - ----- -- --------------
------ -
--------
--------
------ ----- -------- ---------------- --
------------- ----- --------------- ------------------- --------------------------------- --
------ ----- ------------- ----------------- --
---------
---------
--
--
------ ------- ----在这个应用程序中，我们将 /profile 路由包装在 <PrivateRoute> 组件中，并传递 isAuthenticated 属性。这将确保只有已登录的用户才能访问个人资料页面。
总结
React Router 是一个强大的路由器，可以帮助您更好地组织和管理 React 应用程序的不同部分。使用私有路由组件，您可以轻松实现授权和安全性功能
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/14536