如何以角度解码 JWT 令牌 - JavaScript

JSON Web Token (JWT) 是用于身份验证和授权的开放标准。 它使用 JSON 对象作为有效载荷，并且可以被签名和加密以保证传输过程的安全性。

在使用 JWT 时，我们可能需要解码令牌以查看其内容，这就需要我们对令牌进行解码。 在本文中，我们将学习如何使用 JavaScript 解码 JWT 令牌。

JWT 令牌的结构

在解码 JWT 令牌之前，我们需要先了解 JWT 令牌的结构。

JWT 令牌包含三个部分：头部、有效载荷和签名。它们都用 Base64 进行编码，每个部分以点 . 分隔。

例如，下面是一个 JWT 令牌的示例：

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

• 头部：eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
• 有效载荷：eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ
• 签名：SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

JavaScript 解码 JWT 令牌

在 JavaScript 中，我们可以使用 atob() 函数将 BASE64 字符串解码为 ASCII 字符串。 但是，JWT 令牌中的头部和有效载荷是 JSON 对象，因此我们需要将它们解析为 JavaScript 对象。

下面是一个解码 JWT 令牌的 JavaScript 函数：

function decodeToken(token) {
    const jwtParts = token.split('.');
    const decodedHeader = JSON.parse(atob(jwtParts[0]));
    const decodedPayload = JSON.parse(atob(jwtParts[1]));
    return {
        header: decodedHeader,
        payload: decodedPayload
    };
}

该函数接受一个 JWT 令牌字符串，并将其拆分为头部、有效载荷和签名。然后，它依次解码头部和有效载荷，并将其解析为 JavaScript 对象。 最后，该函数返回头部和有效载荷的对象。

const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';

const decodedToken = decodeToken(token);

console.log(decodedToken.header); // { "alg": "HS256", "typ": "JWT" }
console.log(decodedToken.payload); // { "sub": "1234567890", "name": "John Doe", "iat": 1516239022 }

执行以上代码，会得到以下输出：

{ "alg": "HS256", "typ": "JWT" }
{ "sub": "1234567890", "name": "John Doe", "iat": 1516239022 }

在上面的示例中，我们将 JWT 令牌解码为头部和有效载荷，并将它们存储在 decodedToken 变量中。 然后，我们打印头部对象和有效载荷对象。

结论

在本文中，我们学习了如何使用 JavaScript 解码 JWT 令牌。 我们了解了 JWT 令牌的结构，并使用 atob() 函数将 BASE64 字符串解码为 ASCII 字符串。 通过解析有效载荷和头部，我们可以查看 JWT 令牌的内容，这对于调试和测试十分有用。