React 是一个非常流行的前端框架，而 React Router 则是处理应用程序路由的主要解决方案。在某些情况下，您可能需要对某些页面或组件进行身份验证，以防止未经授权的用户访问它们。在这篇文章中，我们将学习如何使用 React Router 4 实现认证路由，以便只有已登录的用户才能访问。
第一步：安装 React Router 4
首先，在项目中安装 React Router 4：
npm install --save react-router-dom
第二步：创建一个高阶组件
在 React 中，高阶组件（Higher Order Component）是一种函数，它接受一个组件作为参数，并返回一个新的组件。下面是一个示例高阶组件，它用于检查用户是否已登录：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- -------------------
----- -------- - ----------- -- -
----- --------- - -- -- -
----- ---------- - -----------------------------------
------ ---------- - ---------- -- - --------- ----------- ---
--
------ ----------
--
------ ------- ---------此高阶组件可以接受要保护的组件作为参数，如果用户已经登录，则渲染该组件；否则，重定向到登录页面。
第三步：使用高阶组件保护路由
现在，我们可以使用上述高阶组件来保护需要身份验证的路由。例如，假设您有一个名为 /dashboard 的私人页面，只有已登录的用户才能访问它。下面是如何使用高阶组件来实现：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ----- - ---- -------------------
------ -------- ---- -------------
------ --------- ---- --------------
------ ----- ---- ----------
----- --- - -- -- -
--------
-----
------ ----- -------- ----------------- --
------ ----------------- ------------------------------- --
------
---------
--
------ ------- ----在这个例子中，我们通过 withAuth 高阶组件将 /dashboard 路由保护起来。如果用户未经授权地尝试访问该页面，他们将被重定向到 /login 路由。
结论
恭喜！现在您已经知道了如何使用 React Router 4 来实现认证路由和保护私人页面。当然，这只是一种解决方案，并且您可能会发现其他方法更适合您的应用程序。总之，希望本文能够为您提供一些启示和指导，使您的 React 应用程序更加安全、可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26883