如何在 Next.js 应用中使用 JWT Token 进行身份验证

阅读时长 7 分钟读完

在现代 Web 应用中,用户身份验证是一个必不可少的功能。基于 JWT(Token)(JSON Web Token)的身份验证是一种流行且安全的方法。它将用户的身份信息编码到 JSON 对象中,使用密钥对其进行签名,然后传递到前端应用程序中,并在每个请求中携带。

本文将介绍如何在 Next.js 应用中使用 JWT Token 进行身份验证。

1. 理解 JWT Token

JWT 全称是 JSON Web Token,是一个开放标准(RFC 7519),用于安全地在两个实体之间传输信息。JWT Token 由三部分组成:Header,Payload 和 Signature。

  • Header:描述了 JWT Token 的类型以及所使用的加密算法。
  • Payload:包含了一些有关用户身份的信息,比如用户ID等。
  • Signature:对Header和Payload进行签名,保证数据的完整性和真实性。

JWT Token 的生成流程如下图所示:

使用 JWT Token 的好处有很多,包括:

  • 无状态:JWT Token 不需要存储在服务器上,所有的信息都编码在 Token 中。
  • 安全性:Payload 中的信息被签名,防止被篡改和伪造。
  • 传输格式:JWT Token 是一个字符串,可以在 HTTP 请求头部、URL 参数和请求体中进行传输。
  • 解耦:JWT Token 可以被用于任意验证场景,不需要将 JWT Token 直接绑定到特定的身份验证方案。

2. 生成 JWT Token

在 Next.js 应用中,可以使用 jsonwebtoken 库来生成 JWT Token。以下是一个简单的示例代码:

-- -------------------- ---- -------
----- --- - ------------------------

----- ---- - -
    --- --
    ----- -----
--

----- ----- - -------------- ------------- - ---------- ---- ---

-------------------

此示例中,user 对象包含了用户的 ID 和名称。调用 jwt.sign 方法对 user 进行签名,并传递一个密钥参数(secret_key)和一个 Token 过期时间参数(expiresIn: '1h')。jwt.sign 方法将返回一个 JWT Token。

3. 在 Next.js 应用中验证 JWT Token

在 Next.js 应用中验证 JWT Token 可以通过两种方式实现:

  • 在每个请求上进行身份验证。
  • 在服务器启动时进行身份验证,并将用户数据保存在 Redux Store、cookies 或本地存储中。

本文将介绍在每个请求上进行身份验证的实现方式。首先,需要创建一个身份验证中间件。

3.1 创建身份验证中间件

-- -------------------- ---- -------
------ --- ---- ---------------

----- ------ - -------------------

------ ------- -------- ----------------------- -
    ------ ----- ----- ---- -- -
        ----- ---------- - --------------------------

        -- ------------- -
            ------ ---------------------- -------- -------------- ------ -- --- --------- ---
        -

        ----- ----- - ------------------ ------
        --- -
            ----- ---- - ----------------- --------
            -------- - -----
            ------ ------------ -----
        - ----- ----- -
            ------ ---------------------- -------- --------------- ---
        -
    --
-

此示例中,创建了一个 authMiddleware 函数,它将加入到 Next.js API 路由器(/api/*)中。它首先从请求头部中提取 JWT Token,然后使用jsonwebtoken模块的verify方法来验证Token。如果 Token 不合法,则返回 401 未授权的状态码。否则,将解码的用户对象保存在 req.user 中,并将请求传递给下一个处理程序。

3.2 使用身份验证中间件

在需要进行身份验证的 API 路由器中,使用 authMiddleware 中间件即可。

3.3 在客户端中使用 JWT Token

客户端可以在每个请求中携带 JWT Token。可以将 JWT Token 存储在浏览器的 cookie 或本地存储中。

-- -------------------- ---- -------
------ ----- ---- --------

----- -------- - ------------------------

-------- -------------- -
    ------ ------------------------------
-

-------- ------------------- -
    ----------------------------- -------
-

-------- ---------------- -
    ---------------------------------
-

--------------------------------------- -- -
    ----- ----- - ---------------
    -- ------- -
        -- -- --- -----
        ---------------------------- - ------- ----------
    -
    ------ -------
---

------ ----- -------- --------------- --------- -
    ----- --- - ----- ---------------------------------------- -
        ---------
        --------
    ---
    
    -- -- --- -----
    ----- ----- - ---------------
    --------------------
-

------ ----- -------- -------- -
    -----------------
-

------ ----- -------- ---------------- -
    ----- --- - ----- -------------------------------------
    ------ ---------
-

在 axios 请求拦截器中,将 JWT Token 存储在请求头部的 Authorization 字段中。在登录过程中,API 服务端将生成并返回一个 JWT Token,客户端将其存储在浏览器的本地存储中。在联机时,请求头部中将携带 JWT Token,作为 API 服务端的身份验证标识。

结论

本文介绍了如何在 Next.js 应用中使用 JWT Token 进行身份验证。JWT Token 是一种流行且安全的身份验证方法。通过创建身份验证中间件,在每个请求上验证 JWT Token,并将解码后的用户对象保存在请求中。客户端可以在每个请求中携带 JWT Token,以作为身份验证标识。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/671c87439babaf620fb12d2f

纠错
反馈