在现代 web 应用中，身份认证是一个不可缺少的功能。JWT（JSON Web Tokens）是一种常见的身份认证方式。在本文中，我们将探索如何在 Next.js 应用中使用 JWT 进行身份认证。
JWT 简介
JWT 是一种用于传输声明的简明安全传输协议，可以通过加密和签名来保护数据。在身份认证方案中，JWT 被用于生成和验证用户的凭证信息。JWT 由三部分组成：Header（头部）、Payload（负载）和 Signature（签名）。Header 包含算法和类型信息；Payload 包含需要传输的声明信息；Signature 使用密钥和头部信息生成，用于验证传输的信息是否被篡改。
创建一个 Next.js 应用
首先，我们需要创建一个 Next.js 应用。我们可以使用 create-next-app 命令来创建一个新的 Next.js 应用：
npx create-next-app my-app
然后，我们可以进入 my-app 目录并启动应用：
cd my-app npm run dev
现在我们有了一个运行在 http://localhost:3000 上的 Next.js 应用。
安装依赖包
接下来，我们需要安装一些依赖包：
npm install jsonwebtoken cookie-parser
我们使用 jsonwebtoken 来生成和验证 JWT，使用 cookie-parser 来处理 Cookie。
创建一个登录页面
我们需要一个登录页面来获取用户的凭证信息。在 pages 目录下创建一个名为 login.js 的文件，然后添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- -------
------ ------- -------- ------- -
----- ------- --------- - ------------
----- ---------- ------------ - ------------
----- ------------ - ----- - -- -
------------------
--- -
----- --- - ----- ------------------- -
------- -------
-------- - --------------- ------------------ --
----- ---------------- ------ -------- --
--
-- --------- ----- --- ---------------------
----- - ----- - - ----- ----------
--------------- - ----------------
-------------------- - ---
- ----- ----- -
------------------
-
-
------ -
----- ------------------------
------
------------
-------------
----------- -- -------------------------
--
------
---------------
----------------
----------- -- ----------------------------
--
------- ----------------------------
-------
-
-在这个页面中，我们使用 useState 来存储用户输入的邮箱和密码。在表单提交时，我们将这些信息发送到 /api/login 路由上，并等待响应。如果响应正常，我们将获取到的 JWT 存储在 Cookie 中，并将用户重定向到应用的主页。
创建一个认证 API
接下来，我们需要创建一个 Express 路由，用于验证用户凭证信息并生成 JWT。在应用的根目录中创建一个名为 api 的目录，然后在其中创建一个名为 login.js 的文件，添加以下代码：
-- -------------------- ---- -------
------ --- ---- --------------
------ - ------- - ---- ----------
------ - --------------- --------------- - ---- ------
------ - -------------- - ---- ----------------
----- ------ - ----------
------ ------- ----- -------- ------
---- ---------------
---- ---------------
- -
----- - ------ -------- - - --------
--- -
----- ---- - ----- ---------------------
-- ------- -
---------------------- -------- -------- ----- -- --------- --
------
-
----- ----- - ----- ----------------- --------------
-- -------- -
---------------------- -------- -------- ----- -- --------- --
------
-
----- ----- - ---------- ---- ------- -- -------
---------- ----- --
- ----- ----- -
------------------
---------------------- -------- --------- ------ ------ --
-
-在这个路由中，我们使用 getUserByEmail 函数来获取具有给定电子邮件的用户。如果找不到用户或密码不正确，则返回 401 状态码并包含错误消息。否则，我们签署 JWT 并将其返回到客户端。
创建一个保护页面
现在我们有了一个登录页面和可以用于验证用户凭证信息的 API。但是，我们希望在用户登录后只允许他们访问某些页面。为此，我们可以创建一个高阶组件来保护需要身份验证的页面。在 lib 目录中创建一个名为 withAuth.js 的文件，添加以下代码：
-- -------------------- ---- -------
------ --- ---- --------------
------ - ----------------- - ---- ------
------ - --------------- - ---- ------------
------ - --------- - ---- -------------
------ - --------- - ---- -------
----- ------ - ----------
------ ----- -------- -
------------------ ------------------ -- ------- ---- -- -
----- ------ - -----------
------------ -- -
----- ----- - ------------------------
----------------------------------------------
----
-
-- -------- ---------------------
--- -
----------------- -------
- ----- ----- -
---------------------
-
-- ---
------ ----------------- ---------- --
-这个高阶组件将在页面加载时检查 Cookie 中是否包含 JWT。如果不包含，则用户将被重定向到登录页面。如果包含，则我们可以验证该 JWT 是否有效。在这个例子中，我们只是验证 JWT 是否可以解码，但是实际上我们可能会生成过期时间、标识符或其他声明，然后在验证时检查该声明。
在应用页面中使用身份认证
现在我们已经准备好了，可以在我们应用的页面中使用身份认证来限制对某些页面的访问。假设我们要保护一个名为 dashboard 的页面，我们可以在其中使用高阶组件：
import { withAuth } from '../lib/withAuth'
function Dashboard() {
return <h1>Dashboard</h1>
}
export default withAuth(Dashboard)现在，只有经过身份验证的用户才能访问 dashboard 页面。
结论
在本文中，我们了解了在 Next.js 应用中使用 JWT 进行身份认证的方法。在实际应用中，我们可能需要更复杂的方案，例如在客户端和服务器端进行身份验证，使用社交登录或 OAuth 2.0 等。但是，使用 JWT 对于许多 web 应用程序来说是一个灵活而强大的方案，可以轻松地实现许多基本的身份认证需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d3f28a336082f254aa066