在 Next.js 中，路由鉴权是一个常见的需求。例如，我们可能需要在用户未登录时禁止其访问某些页面。
在本文中，我们将介绍 Next.js 中如何实现路由鉴权，并提供示例代码。
一、使用 getInitialProps 钩子
Next.js 中有一个称为 getInitialProps 的生命周期钩子，可以在每次页面加载时获取初始数据。
我们可以利用这个钩子来进行路由鉴权。具体的实现步骤如下：
1. 在 pages 目录下创建需要鉴权的页面
这里我们以一个需要登录才能访问的页面 profile.js 为例，代码如下：
------ ----- ---- --------
----- ------- - -- -- -
------ -
-----
----------------
------- -- - ------- ---------
------
--
--
------ ------- --------2. 在 getInitialProps 中进行鉴权
在 profile.js 中，我们可以通过 getInitialProps 钩子来进行登录鉴权：
------ ----- ---- --------
------ ------ ---- --------------
----- ------- - -- ---------- -- -- -
-- ------------- -
----------------------
------ -----
-
------ -
-----
----------------
------- -- - ------- ---------
------
--
--
----------------------- - ----- -- --- -- -- -
----- ---------- - --- - ----------------- - ------
------ - ---------- --
--
------ ------- --------在上面的代码中，我们首先判断用户是否已登录。若未登录，则使用 Router 跳转到登录页面，并返回 null。若已登录，则展示用户的个人资料。
其中，getInitialProps 钩子中需要从请求的上下文对象中确定用户是否已登录。这需要在服务端实现对请求的鉴权，以区分当前是在客户端还是服务器上运行。在本文中，我们将鉴权过程简化为由服务端直接传递当前用户登录状态的方式。实际应用中，可能需要更复杂的鉴权策略。
二、使用客户端路由
除了在服务器端进行路由鉴权，还可以在客户端进行路由鉴权。为此，我们可以在客户端使用 Next.js 提供的 useRouter 钩子，获取当前的路由信息。
具体的实现步骤如下：
1. 在 pages 目录下创建需要鉴权的页面
这里我们仍以一个需要登录才能访问的页面 profile.js 为例，代码如下：
------ ------ - --------- - ---- --------
------ - --------- - ---- --------------
----- ------- - -- ---------- -- -- -
----- ------ - ------------
------------ -- -
-- ------------- -
----------------------
-
-- -------- -------------
-- ------------- -
------ -----
-
------ -
-----
----------------
------- -- - ------- ---------
------
--
--
----------------------- - ----- -- --- -- -- -
----- ---------- - --- - ----------------- - ------
------ - ---------- --
--
------ ------- --------在上面的代码中，我们首先通过 useRouter 钩子获取当前的路由信息。然后在 useEffect 钩子中判断用户是否已登录。若未登录，则使用 router.push 方法跳转到登录页面，并返回 null；若已登录，则展示用户的个人资料。
相比于服务器端的鉴权方式，客户端的鉴权方式更为简洁，但同时需要更多的客户端资源。
三、总结
本文介绍了 Next.js 中如何实现路由鉴权，并提供了两种实现方式：使用 getInitialProps 钩子实现服务器端路由鉴权，以及使用客户端路由实现客户端路由鉴权。这两种方式的实现步骤较为相似，但具体实现时需要根据实际应用场景进行选择。
使用 Next.js 进行路由鉴权可以有效地保护敏感页面，提高应用程序的安全性，同时也可以提供更好的用户体验。
四、示例代码
本文示例代码已上传至 GitHub，欢迎下载学习：https://github.com/Assistant-GPT2/Next.js-Router-Authentication-Example。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6494438548841e98941c29bc