本地解码 JWT，不上传、不泄露、秒看用户权限和角色

作者提米哥

你是不是也这样调试 JWT？

复制一串长长的 token（比如 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...），粘贴到某个网页工具里——点一下，就立刻看到 header 和 payload 里的用户 ID、角色、过期时间……

但你有没有想过：这串 token 里可能藏着你的用户名、邮箱、部门、甚至内部系统 ID？
而你刚把它发给了一个陌生的第三方网站。
它真的只“解码”？还是悄悄存下来、分析、甚至转发？没人能 100% 确保。

我们做的不是另一个在线 JWT 解码器，而是 真正在你浏览器里运行的解码器：
– ✅ 所有解码工作都在你自己的电脑上完成（连网络请求都不发）
– ✅ 复制 → 粘贴 → 立刻展开 JSON，格式清晰、中文友好（支持中英文界面切换）
– ✅ 不上传、不联网、不追踪——token 永远不会离开你的浏览器内存

就像用计算器算数，不用把数字发给服务器一样自然。

它怎么做到的？核心就三步（前端纯 JS 实现）：
1. 把 JWT 按 . 拆成三段（header.payload.signature）
2. 对 header 和 payload 部分做 Base64Url 解码（不是普通 Base64！注意补 = 号和字符替换）
3. 把解出来的字符串解析为 JSON，并美化输出

示例代码（你在控制台就能跑）：

// JWT Base64Url 解码函数（兼容浏览器环境）
function base64UrlDecode(str) {
  // 补齐 = 号（Base64Url 编码会省略）
  str = str.replace(/-/g, '+').replace(/_/g, '/'); // 替换 URL 安全字符
  while (str.length % 4) str += '='; // 补齐长度为 4 的倍数
  return JSON.parse(atob(str)); // atob 是浏览器原生解码函数
}

// 示例 JWT（仅用于演示，不含真实数据）
const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c";

const [headerB64, payloadB64] = token.split('.'); // 只取前两段
console.log('Header:', base64UrlDecode(headerB64));
console.log('Payload:', base64UrlDecode(payloadB64));
// 输出就是可读的 JSON 对象，含算法、类型、用户ID、姓名、签发时间等

这不是炫技，是底线：

调试不该成为安全漏洞的起点。
你有权在不交出敏感数据的前提下，看清自己发出去的每一串 token。

直达网址：https://everytool.solutions/tools/jwt-decoder

作加

微信联系：timidamen

类似文章