如何从JWT令牌中获取用户角色

Question

在服务器端，我有以下代码用于登录：

return jsonify({'email': email, 'token': create_token(email, isAdmin, password)})

在客户端，我需要代码来检查登录并检查是否为管理员。

isLogged() {
if (localStorage.getItem('currentUser') &&
    JSON.parse(localStorage.getItem('currentUser')).email) {
  return true;
}
return false;
}

isAdmin(){
  //???
}

我怎样从令牌中获取用户角色？

- DzouSi

---

你尝试过解码以查看声明吗？请参见此问题 - 0mpurdy

我只在服务器端拥有秘钥，而不是客户端。 - DzouSi

您不需要秘密密钥来解码有效载荷。它是一个base64url编码的json对象。 - pedrofb

你可以给我一个解码有效载荷的例子吗？ - DzouSi

Answer 1

假设你有这个JWT (此处的示例)

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

您可以使用类似于这样的方法进行解码：

let jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ'

let jwtData = jwt.split('.')[1]
let decodedJwtJsonData = window.atob(jwtData)
let decodedJwtData = JSON.parse(decodedJwtJsonData)

let isAdmin = decodedJwtData.admin

console.log('jwtData: ' + jwtData)
console.log('decodedJwtJsonData: ' + decodedJwtJsonData)
console.log('decodedJwtData: ' + decodedJwtData)
console.log('Is admin: ' + isAdmin)

- 0mpurdy

---

这个解决方案绝对有效，因为我刚刚亲自测试过。尽管如此，我不太自信使用 window.atob(...) ，因为它看起来不太符合 Angular 风格。它有点像使用旧版 JS 进行编程。虽然这可能只是我无知，但是否有更符合 TypeScript 风格的语法来执行此操作呢？特别是如果它打包在与 JWT 相关的库中。毕竟，所有 JWT 令牌都由三个部分组成，我们只想查看其中一个部分的解码版本，对吧？ - DonkeyBanana

我认为使用 atob 是可以的。有人可以在 TypeScript 中重新实现 atob 并将其作为 npm 包发布，但我不知道那样做能解决什么问题。你可能会遇到的唯一问题是浏览器对 atob 的实现可能不同，但我认为如果它们无法编码/解码 base64，则可能存在较大的浏览器问题。 - Lewis Cianci