javaScript 解析JWT

原创

mob64ca12ecb6c5 2024-07-31 05:03:58 ©著作权

文章标签 javascript JSON 数据 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12ecb6c5的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaScript 解析 JWT（JSON Web Token）

在现代Web开发中，JWT（JSON Web Token）被广泛用于用户身份验证和信息交换。作为一名刚入行的小白，要学会如何在JavaScript中解析JWT，我们可以按照以下步骤进行。

流程步骤

步骤	描述
1	理解JWT的结构
2	获取一个JWT
3	在JavaScript中拆分JWT
4	解码JWT的负载部分
5	验证和使用解码后的数据

每一步的详细操作

1. 理解JWT的结构

在解析JWT之前，了解JWT的基本结构十分重要。JWT有三个部分：头部（Header）、负载（Payload）和签名（Signature）。这三个部分用.连接在一起。

JWT结构示例：
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36PoYwUhjp2b1P2N7k

2. 获取一个JWT

在实际项目中，JWT通常是在用户登录后生成的。这里我们先假设已经拥有一个JWT。

const jwt = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36PoYwUhjp2b1P2N7k";
// 示例JWT，用于后续代码解析

3. 在JavaScript中拆分JWT

JWT由三个部分组成，使用点号（.）进行分隔。我们可以使用 split 方法来拆分JWT。

const jwtParts = jwt.split('.');
// jwtParts[0]：头部
// jwtParts[1]：负载
// jwtParts[2]：签名

4. 解码JWT的负载部分

在JWT中，负载部分通常是用Base64Url编码的。我们可以使用 atob 函数解码负载。

const payload = JSON.parse(atob(jwtParts[1]));
// atob：将Base64编码的字符串解码为原始字符串
// JSON.parse：将解码后的字符串转换为对象

5. 验证和使用解码后的数据

现在我们已经解码了负载部分，可以使用它所包含的信息。

console.log(payload);
// 输出解码后的负载数据，例如用户ID和姓名等

完整代码示例

将上面的步骤组合在一起，我们得到了一个完整的JWT解析示例：

const jwt = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36PoYwUhjp2b1P2N7k";

const jwtParts = jwt.split('.'); // 拆分JWT

const payload = JSON.parse(atob(jwtParts[1])); // 解码负载部分

console.log(payload); // 输出：{ sub: '1234567890', name: 'John Doe', iat: 1516239022 }