如何在 JavaScript 中解码 JWT Token

JWT(JSON Web Token)是一种轻量级的身份验证和授权机制,由于其简单、可扩展和跨平台等特点,在前端应用程序中得到广泛应用。然而,当我们从后端获取到 JWT Token 时,我们需要对其进行解码才能使用其中的信息。

在本文中,我们将介绍如何使用 JavaScript 解码 JWT Token 并访问其中的信息。

JWT Token 的结构

JWT Token 由三部分组成,它们分别是:Header、Payload 和 Signature。

Header

Header 部分通常指定了令牌的类型和所使用的签名算法。例如:

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

其中 alg 是算法名称, typ 表示 token 类型为 JWT。

Payload

Payload 部分包含有关主题的声明,以及其他任意数据。例如:

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

其中 sub 表示主题, iat 表示令牌的签发时间。

Signature

Signature 部分使用私钥对 Header 和 Payload 部分进行签名,确保令牌未被篡改。例如:

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

其中 secret 是使用的私钥。

解码 JWT Token

在 JavaScript 中解码 JWT Token 需要一些基本操作。接下来,我们将介绍如何完成这些操作。

步骤 1:将 JWT Token 分解为 Header、Payload 和 Signature 部分

我们可以使用 split 函数将 JWT Token 分解为三个部分:

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

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

步骤 2:对 Header 和 Payload 进行 Base64 URL 解码

JWT Token 的 Header 和 Payload 部分都是经过 Base64 URL 编码的。因此,我们需要先进行 Base64 URL 解码才能得到可读的数据。

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

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

步骤 3:获取 JWT Token 中的信息

现在我们已经成功地解码了 JWT Token 的 Header 和 Payload 部分,我们可以从中获取所需的信息了:

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

示例代码

下面是完整的示例代码:

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

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

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