本文将介绍如何在 Next.js 应用中集成 JWT 实现用户认证。JWT（JSON Web Token）是一种轻量级的认证方式，它使用 JSON 对象作为载荷，通过数字签名保证了数据的完整性和真实性，从而实现了用户认证和授权。
1. 安装依赖
我们需要安装两个依赖：jsonwebtoken 和 cookie-parser。
npm install jsonwebtoken cookie-parser
jsonwebtoken 用于生成和验证 JWT，cookie-parser 用于解析和设置 Cookie。
2. 创建认证 API
我们先创建一个 /api/auth.js 文件，用于处理用户登录和注册的请求。
-- -------------------- ---- -------
------ --- ---- ---------------
------ ------ ---- ----------------
----- ------ - ------------------
------ ------- ----- ---- -- -
----- - ------- ---- - - ----
-- ------- --- ------- -
-- ------
----- - --------- -------- - - -----
-- --------
-- --------- --- ------- -- -------- --- --------- -
-- -- ---
----- ----- - ---------- -------- -- ------- - ---------- ---- ---
-- -- ------
--------------------------- ------------------------- ------ -
--------- -----
--------- ---------
------- -----
----- ----
----
---------------------- -------- ------ ---
- ---- -
---------------------- -------- ---------- ---
-
- ---- -- ------- --- --------- -
-- ------
--------------------------- ------------------------- --- -
--------- -----
--------- ---------
-------- --- --------
----- ----
----
---------------------- -------- ------ ---
- ---- -
---------------------- -------- -------- ---
-
--上面的代码中，我们先定义了一个 secret 变量作为 JWT 签名的密钥。在处理登录请求时，我们先验证用户名和密码，如果验证通过，则调用 jwt.sign 方法生成 JWT，并通过 cookie.serialize 方法设置 Cookie。在处理注销请求时，我们通过设置 Cookie 的过期时间使其失效。
3. 集成认证 API
接下来，我们需要在 Next.js 应用中集成认证 API。
-- -------------------- ---- -------
------ - --------- --------- - ---- --------
------ ----- ---- --------
----- ---- - -- -------- -- -- -
----- ------ -------- - ---------------
------------ -- -
----- --------- - ----- -- -- -
--- -
-- -- --- ----------
----- --- - ----- -----------------------
------------------
- ----- ------- -
--------------
-
--
------------
-- ----
----- ----- - ----- ---------- --------- -- -
--- -
-- -- ---- --------
----- ----------------------- - --------- -------- ---
-- ------
----- --- - ----- -----------------------
------------------
- ----- ------- -
---------------------
-
--
----- ------ - ----- -- -- -
--- -
-- -- ------ --------
----- --------------------------
-- ------
--------------
- ----- ------- -
---------------------
-
--
------ -
--------------------- -------- ----- ------ ------ ---
----------
-----------------------
--
--
------ ------- -----上面的代码中，我们定义了一个 Auth 组件，用于管理用户认证状态。在 useEffect 钩子中，我们发送一个 GET 请求获取当前用户信息，如果请求成功，则更新用户状态。在 login 方法中，我们发送一个 POST 请求进行登录操作，如果登录成功，则更新用户状态。在 logout 方法中，我们发送一个 DELETE 请求进行注销操作，如果注销成功，则清除用户状态。最后，我们将 user、login 和 logout 三个状态和方法传递给 AuthContext.Provider，以便在子组件中使用。
4. 鉴权路由
我们可以通过编写一个 PrivateRoute 组件来实现鉴权路由。
-- -------------------- ---- -------
------ - ---------- - ---- --------
------ - ------ -------- - ---- -------------------
------ - ----------- - ---- ----------------
----- ------------ - -- ---------- ---------- ------- -- -- -
----- - ---- - - ------------------------
------ -
------ --------- ------------- --
---- - ---------- ---------- -- - --------- ----------- --
- --
--
--
------ ------- -------------上面的代码中，我们通过 useContext 钩子获取 user 状态，如果 user 为真，则渲染 Component 组件，否则重定向到登录页面。
5. 示例代码
下面是一个完整的示例代码，包括登录页面、用户信息页面和注销按钮。
-- -------------------- ---- -------
-- --------------
------ - --------- ---------- - ---- --------
------ - ---------- - ---- -------------------
------ - ----------- - ---- ----------------------------
----- ----- - -- -- -
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- - ----- - - ------------------------
----- ------- - -------------
----- ------------ - ----- ----- -- -
-----------------------
--- -
----- --------------- ----------
------------------
- ----- ------- -
---------------------
-
--
------ -
----- ------------------------
------ ----------- ---------------- --------------- -- -------------------------------- --
------ --------------- ---------------- --------------- -- -------------------------------- --
------- -------------------------
-------
--
--
------ ------- ------
-- -------------
------ - ---------- - ---- --------
------ - ----------- - ---- ----------------------------
----- ---- - -- -- -
----- - ----- ------ - - ------------------------
------ -
--
--------------------------
------- ----------------------------
---
--
--
------ ------- -----
-- ------------------
------ - --------- --------- - ---- --------
------ ----- ---- --------
----- ----------- - ----------------
----- ------------ - -- -------- -- -- -
----- ------ -------- - ---------------
------------ -- -
----- --------- - ----- -- -- -
--- -
----- --- - ----- -----------------------
------------------
- ----- ------- -
--------------
-
--
------------
-- ----
----- ----- - ----- ---------- --------- -- -
--- -
----- ----------------------- - --------- -------- ---
----- --- - ----- -----------------------
------------------
- ----- ------- -
---------------------
-
--
----- ------ - ----- -- -- -
--- -
----- --------------------------
--------------
- ----- ------- -
---------------------
-
--
------ -
--------------------- -------- ----- ------ ------ ---
----------
-----------------------
--
--
------ - ------------ ------------ --
-- --------------------------
------ - ---------- - ---- --------
------ - ------ -------- - ---- -------------------
------ - ----------- - ---- ----------------
----- ------------ - -- ---------- ---------- ------- -- -- -
----- - ---- - - ------------------------
------ -
------ --------- ------------- --
---- - ---------- ---------- -- - --------- ----------- --
- --
--
--
------ ------- -------------
-- -----------
------ --- ---- ---------------
------ ------ ---- ----------------
----- ------ - ------------------
------ ------- ----- ---- -- -
----- - ------- ---- - - ----
-- ------- --- ------- -
----- - --------- -------- - - -----
-- --------- --- ------- -- -------- --- --------- -
----- ----- - ---------- -------- -- ------- - ---------- ---- ---
--------------------------- ------------------------- ------ -
--------- -----
--------- ---------
------- -----
----- ----
----
---------------------- -------- ------ ---
- ---- -
---------------------- -------- ---------- ---
-
- ---- -- ------- --- --------- -
--------------------------- ------------------------- --- -
--------- -----
--------- ---------
-------- --- --------
----- ----
----
---------------------- -------- ------ ---
- ---- -
---------------------- -------- -------- ---
-
--
-- -----------
------ --- ---- ---------------
------ ------ ---- ----------------
----- ------ - ------------------
------ ------- ----- ---- -- -
----- - ------- - - ----
-- --------------- -
----- ----- - --------------
--- -
----- - -------- - - ----------------- --------
---------------------- -------- ---
- ----- ------- -
---------------------- -------- ------- ---
-
- ---- -
---------------------- -------- ------- ---
-
--6. 总结
本文介绍了如何在 Next.js 应用中集成 JWT 实现用户认证。我们通过编写认证 API、管理用户状态和编写鉴权路由等步骤，实现了一个简单的用户认证系统。JWT 是一种轻量级的认证方式，它可以在前端和后端之间传递用户信息，从而实现了分布式认证和授权。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651624a395b1f8cacde79e3d