JWT（JSON Web Token）是一种轻量级的身份验证和授权机制，由于其简单、可扩展和跨平台等特点，在前端应用程序中得到广泛应用。然而，当我们从后端获取到 JWT Token 时，我们需要对其进行解码才能使用其中的信息。
在本文中，我们将介绍如何使用 JavaScript 解码 JWT Token 并访问其中的信息。
JWT Token 的结构
JWT Token 由三部分组成，它们分别是：Header、Payload 和 Signature。
Header
Header 部分通常指定了令牌的类型和所使用的签名算法。例如：
{
"alg": "HS256",
"typ": "JWT"
}其中 alg 是算法名称， typ 表示 token 类型为 JWT。
Payload
Payload 部分包含有关主题的声明，以及其他任意数据。例如：
{
"sub": "1234567890",
"name": "John Doe",
"iat": 1516239022
}其中 sub 表示主题， iat 表示令牌的签发时间。
Signature
Signature 部分使用私钥对 Header 和 Payload 部分进行签名，确保令牌未被篡改。例如：
HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), secret)
其中 secret 是使用的私钥。
解码 JWT Token
在 JavaScript 中解码 JWT Token 需要一些基本操作。接下来，我们将介绍如何完成这些操作。
步骤 1：将 JWT Token 分解为 Header、Payload 和 Signature 部分
我们可以使用 split 函数将 JWT Token 分解为三个部分：
const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'
const [header, payload, signature] = token.split('.')步骤 2：对 Header 和 Payload 进行 Base64 URL 解码
JWT Token 的 Header 和 Payload 部分都是经过 Base64 URL 编码的。因此，我们需要先进行 Base64 URL 解码才能得到可读的数据。
const decodeBase64Url = (str) => {
const base64 = str.replace(/-/g, '+').replace(/_/g, '/')
const raw = window.atob(base64)
return JSON.parse(raw)
}
const decodedHeader = decodeBase64Url(header)
const decodedPayload = decodeBase64Url(payload)步骤 3：获取 JWT Token 中的信息
现在我们已经成功地解码了 JWT Token 的 Header 和 Payload 部分，我们可以从中获取所需的信息了：
const subject = decodedPayload.sub // 获取主题信息 const name = decodedPayload.name // 获取名称信息 const algorithm = decodedHeader.alg // 获取算法信息
示例代码
下面是完整的示例代码：
-- -------------------- ---- ------- ----- ----- - ------------------------------------------------------------------------------------------------------------------------------------------------------------- -- ------ --- -------- ----- --------------- - ----- -- - ----- ------ - ----------------- ------------------ ---- ----- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------