前言
在现代的 Web 开发中，访问控制和鉴权已经变成了必要的一环。而对于基于 React 的应用，Next.js 已经成为了一种流行的选择。在本文中，我们将学习实践如何在 Next.js 中实现访问控制和鉴权的机制。
认识访问控制和鉴权
访问控制是一种控制用户能够访问哪些资源的技术。鉴权是一种确定用户是否有权访问某个资源或执行某个操作的技术。这两个技术是密不可分的，一起来确保只有授权用户可以访问资源和执行操作。
通常情况下，访问控制和鉴权可以通过一个身份验证机制实现，该机制可验证用户的身份，并根据访问权限和角色来确定其是否可以访问某个资源。
实现的基本思路
在 Next.js 中，保护页面的主要机制是路由保护。路由保护有两个步骤：
- 检查用户是否有资格访问页面。
- 如果用户没有资格访问，将其重定向到登录页面或错误页面。
基于上述步骤，我们可以开始实现一种可靠的访问控制和鉴权机制。
实战应用
在本实践中，我们将构建一个简单的应用程序，让用户们可以管理一份照片。该应用包含以下页面：
- 登录页面
- 照片页面
- 添加照片页面
在该应用中，我们将使用 Firebase 作为后端服务以及 Next.js 和 React 作为前端框架。
加入 Firebase
Firebase 是一个由 Google 提供的基于云的服务，可提供多个功能，包括认证、数据库、存储和推送通知等功能。对于我们的访问控制和鉴权机制来说，我们将主要使用 Firebase 的认证功能。
要加入 Firebase，我们只需要注册并获取自己的 API 密钥即可。
安装 Firebase：
npm install firebase
在我们的 Next.js 应用中，将 firebase.js 文件导入配置文件夹。该文件中将包含我们在 Firebase 中配置的认证凭据。这里我们仅仅导入了认证和数据库功能，其他的功能需要根据自己的应用场景导入。
-- -------------------- ---- ------- ------ -------- ---- -------------- ------ --------------- ------ ------------------- ----- ------ - - ------- ------------ ----------- ------------------------------- ------------ ----------------------------------------- -------------- ---------------------- - -- ----------------------- - ------------------------------ - ----- ---- - --------------- ----- -- - ------------------- ------ - ----- -- -
实现逻辑
对于我们的访问控制和鉴权机制来说，我们将建立一个验证 HOC，它将在访问需要权限的页面时进行验证，并将未登录状态的用户重定向到登录页面。HOC 可以将 Redux 和 Firebase 集成到 Next.js 应用程序中，以方便我们访问任何受到保护的路由的用户信息。
用户登录页面
-- -------------------- ---- -------
----- ----- - -- -- -
----- ------- --------- - ------------
----- ---------- ------------ - ------------
----- ------- --------- - --------------
----- ---------- - ----- ------- -- -
----------------------
--------------
--- -
----- -------------------------------------- ---------
- ----- --- -
----------------------
-
-
------ -
-----
----- ----------------------
--------------
-----
------
----------------- ---- ---- ------------- ------------- ------ ------- ------ ----------------
------------
-------------------
--------------- -- -----------------------------
-------------
--------
--
------
---- -----------------
------
----------------- ---- ---- ------------- ------------- ------ ------- ------ ----------------
---------------
----------------------
--------------- -- --------------------------------
----------------
--------
--
------
-- ------------------------------------
------- --------------- ---- ----------- ---------- ------- -------------------
--- --
---------
-------
------
-
-拥有访问权限的页面
-- -------------------- ---- -------
----- ---------- - -- ---- -- -- -
------ -
-----
----- -- -
-----
---------- ---------
-------- ----------------
---- -----------------
----- -------------------
-- --------------- ---- ----------- ---------- ------- -------------------
--- - -----
----
-------
------
------
--
------ -- -
-----
------ ---- -- ------ -- -- ---- ---- ---------
------
--
------
-
-
----- --------------- - ----- -- --
----- ----------
--
------ ------- ------------------------------------受到保护的页面
-- -------------------- ---- -------
----- -------- - -- ---- -- -- -
------ -
-----
----- -- -
-----
------- - ----------
-------- ----------------
------
--
------ -- -
-----
------ ---- -- ------ -- -- ---- ---- ---------
------
--
------
-
-
----- --------------- - ----- -- --
----- ----------
--
------ ------- ----------------------------------检查用户是否有资格访问已受保护的页面的高阶组件：
-- -------------------- ---- -------
----- -------- - --------- -- -
----- ------------- - ----- -- -
----- -------- - -------------
----- ------ - -----------
----- ---- - ----------------- -- -----------
----- --------- - ----------------- -- ----------------
------------ -- -
-- ----------- -- ------ -
------------------------
-
-- ----------- ----- --------
------------ -- -
---------------------
-- -----------
------ ---------- ---------- --
-
------ -------------
-在这个高阶组件中，我们先定义了一个名为 AuthComponent 的新组件，该组件接收来自我们的 App 组件的所有 prop，并将其应用于原始组件。使用 useDispatch 和 useSelector Hooks 来连接我们的应用中的 Redux 状态。在 AuthComponent 中，我们使用了两个 useEffect Hooks：
第一个 useEffect 片段检查我们的用户状态和页面加载状态，如果用户并没有登录，将其重定向到登录页面。
第二个 useEffect 片段检查我们的用户状态，并在每次组件更新时呈现。直到检查完数据之后才会更新。如果用户没有登陆，我们需要提示用户登录。checkAuth 是一个 action creator，它将检查该用户是否已登录。
对于任何需要受到保护的路径，我们可以通过 withAuth 高阶组件包装它。
我们可以这样使用它：
const ProtectedPhotosPage = withAuth(() => <PhotosPage />) const ProtectedAddPhoto = withAuth(() => <AddPhoto />)
总结
在本文中，我们学习了如何在 Next.js 中实现访问控制和鉴权机制。我们首先介绍了访问控制和鉴权，讲解了如何在 Firebase 后端服务中实现验证，并使用 Next.js 和 Redux 实现了一个适用于我们应用程序的简单 HOC。最后，我们演示了如何在受保护的页面中使用该 HOC。
该实现为保护路由提供了一种简单而实用的方法。希望这篇文章可以为想要学习如何实现访问控制和鉴权机制的 Next.js 开发者们提供些许帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482a5a048841e989420704e