如何在客户端解码 JWT 令牌有效负载？答案

【问题标题】：How to decode JWT Token payload on client side?如何在客户端解码 JWT 令牌有效负载？
【发布时间】：2017-01-06 19:06:19
【问题描述】：

我正在使用 jwt 令牌进行身份验证，并希望在客户端读取有效负载信息。现在我正在做这样的事情：

var payload = JSON.parse(window.atob(token.split('.')[1]));

有没有更好的方法在浏览器中使用 jwt 令牌？

【问题讨论】：

github.com/auth0/jwt-decode
谢谢@robertklep 我之前看过这些文件，但忽略了 .build 文件夹。在点击您的链接后，我在下面发布了我使用的解决方案。
您能解释一下为什么要这样做吗？
信息在我需要在前端读取的有效负载中传递。我是非常基本的东西，比如我当时需要在几个字段中显示的名字和电子邮件地址。

标签： javascript jwt

【解决方案1】：

这个简单的解决方案返回原始令牌、标头和有效负载：

function jwtDecode(t) {
  let token = {};
  token.raw = t;
  token.header = JSON.parse(window.atob(t.split('.')[0]));
  token.payload = JSON.parse(window.atob(t.split('.')[1]));
  return (token)
}

【讨论】：

@AdamReis 如何只做一次？
先拆分字符串，例如const [header, payload] = t.split('.'); 然后您可以转换和 JSON 解析每个部分。必须拆分两次是多余的。我之前的评论并不完全正确。
你还是要验证token，否则就是盲目信任服务器。
@sean 你在说什么？这就是 JWT 的全部意义所在，客户端无需验证任何内容。
解析JWT客户端的用处是更好的UX。

【解决方案2】：

来自https://github.com/auth0/jwt-decode

下载 .build/jwt-decode.min.js 文件并包含在项目中。

<script src="js/jwt-decode.min.js"></script>

var token = 'eyJ0eXAiOo876jgJ96...'; // jwt token;
var decoded = jwt_decode(token);
console.log(decoded);

【讨论】：