如何在客户端解码JWT Token有效负载?

Woo*_*dsy 13 javascript jwt

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

var payload = JSON.parse(window.atob(token.split('.')[1])); 
Run Code Online (Sandbox Code Playgroud)

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

Woo*_*dsy 19

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

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

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

var token = 'eyJ0eXAiO.../// jwt token';
var decoded = jwt_decode(token);
console.log(decoded);
Run Code Online (Sandbox Code Playgroud)

  • 我同意!jwt-decode 包也可以在 NPM 上找到。与使用 window.atob() 的建议不同,该解决方案实际上有效。JWT 使用 Base64Url 编码,与 Base64 略有不同 - 这就是 window.atob() 解析 JWT 时会随机失败的原因。 (2认同)
  • 他们应该让 lib es6 导入友好,他们生活在 90 年代吗 (2认同)

Zde*_*arc 10

这个简单的解决方案返回原始令牌,标头和有效载荷:

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)
}
Run Code Online (Sandbox Code Playgroud)

  • 只需先拆分字符串,例如 `const [header, payload] = t.split('.');` 然后你就可以转换和 JSON 解析每个部分。必须拆分两次是多余的。我之前的评论并不完全正确。 (2认同)
  • @肖恩你在说什么?这就是 JWT 的全部要点,客户端无需验证任何内容。 (2认同)
  • 我建议不要使用它,因为 JWT 使用 base64url 而不是 base64 (标准)。这些编码之间的(- 和 _)与(+ 和 /)之间存在细微差别,这将导致您的某些输入失败。 (2认同)