如何在客户端解码JWT令牌载荷？

Question

我正在使用JWT令牌进行身份验证，并希望在客户端读取有效载荷信息。目前，我正在执行以下操作：

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

在浏览器中处理JWT令牌是否有更好的方法？

- Woodsy

---

https://github.com/auth0/jwt-decode - robertklep

感谢@robertklep，我之前看过那些文件，但是忽略了.build文件夹。在跟随你的链接后，我在下面发布了我使用的解决方案。 - Woodsy

你能解释一下为什么你想这样做吗？ - CodyBugstein

在有效载荷中传递了一些信息，我需要在前端进行读取。这些信息非常基本，例如名字和电子邮件地址，我当时需要在几个字段中显示。 - Woodsy

Answer 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)
}

- Prcek

---

首先将字符串分割开，例如 const [header, payload] = t.split('.');，然后您可以转换并解析每个部分的 JSON。重复分割两次是多余的。我之前的评论并不完全正确。 - Adam Reis

你仍然需要验证令牌，否则你只是盲目地信任服务器。 - sean

@sean 你在说什么？这就是JWT的全部意义，客户端不需要验证任何东西。 - r3wt

在客户端解析JWT的实用性更好，可以提高用户体验。 - vrtjason

我建议不要使用这个，因为JWT使用base64url而不是标准的base64。这些编码之间有细微差别（-和_ vs +和/），会导致一些输入失败。 - raimohanska

Answer 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);

- Woodsy

---

我同意！jwt-decode包也可以在NPM上获得。与使用window.atob()的建议不同，这个解决方案实际上是有效的。JWT使用Base64Url编码，它与Base64略有不同 - 这就是为什么window.atob()会随机失败解析JWT的原因。 - raimohanska

我同意！jwt-decode包也可以在NPM上找到。与使用window.atob()的建议不同，这个解决方案实际上是有效的。JWT使用Base64Url编码，与Base64稍有不同 - 这就是为什么window.atob()在解析JWT时会随机失败的原因。 - undefined

他们应该让那个库支持ES6的导入方式，难道他们还停留在90年代吗？ - Nikos