如何在客户端以角度解码 JWT 编码的令牌负载？

Question

我从我的 API 中获取一个 JWT 编码的访问令牌作为响应。但我无法对其进行解码并以 JSON 格式获取它。我尝试使用 angular2-jwt 库，但它不起作用。我正在下面编写我的代码：

 setXAuthorizationToken(client){
    let requestHeader = new Headers();
    requestHeader.append('Content-Type', 'application/x-www-form-urlencoded');
    this.http.post(client.clientURL + "oauth/token", 'grant_type=password&client_id=toto&client_secret=sec&' +  'username=' + client.username
    + '&password=' + client.password, {
      headers: requestHeader
    }).map(res=>res.json())
    .subscribe((token) =>{
      if(!token.access_token){
          return;
      }
      else{
       var decompressToken = LZString.decompressFromEncodedURIComponent(token.access_token);
       console.log(decompressToken);
}
    });
    }

有人可以帮我解决这个问题吗？

Answer 1

我使用 Auth0 的 jwt-decode 包在 Angular 中解码 JWT 令牌；这个包对我来说很好用。

通过此命令安装软件包后：

npm install jwt-decode

使用以下语法将此包导入到您的 TypeScript 类中：

import * as jwt_decode from "jwt-decode";

或者对于较新的版本（3 及以上）：

import jwt_decode from 'jwt-decode';

然后使用此库方法来解码您的访问令牌，如下所示：

getDecodedAccessToken(token: string): any {
  try {
    return jwt_decode(token);
  } catch(Error) {
    return null;
  }
}

token

参数定义来自 API 的访问令牌。

jwt_decode

方法将解码后的令牌信息作为对象返回；您可以通过您的令牌访问任何信息。

示例

const tokenInfo = this.getDecodedAccessToken(token); // decode token
const expireDate = tokenInfo.exp; // get token expiration dateTime
console.log(tokenInfo); // show decoded token object in console

jwt-decode 是一个小型浏览器库，有助于解码 Base64Url 编码的 JWT 令牌。

重要：该库不验证令牌，任何格式良好的 JWT 都可以解码。您应该验证您的令牌 使用express-jwt、koa-jwt、Owin 等服务器端逻辑 承载JWT等

Answer 2

尝试 JavaScript 内置函数

atob()

。像这样：

atob(token.split('.')[1])

备注：

• 令牌实际上是一个字符串。

• 如果你想知道我为什么分割代币，你应该检查这个网站jwt.io。

Answer 3

使用@auth0/angular-jwt

步骤 - 1：使用 npm 安装

npm install @auth0/angular-jwt

步骤 - 2：导入包

import { JwtHelperService } from '@auth0/angular-jwt';

步骤 - 3：创建实例并使用

const helper = new JwtHelperService();

const decodedToken = helper.decodeToken(myRawToken);

// Other functions
const expirationDate = helper.getTokenExpirationDate(myRawToken);
const isExpired = helper.isTokenExpired(myRawToken);

Answer 4

atob

函数无法正确解析西里尔文或希伯来语，因此我必须使用

JwtHelperService().decodeToken(token)

代替。

Answer 5

我已经定义了我的 JWTService 如下！希望能帮助到你。它是在 TypeScript 中，但只需复制代码即可在普通 javascript 中使用。

import { Injectable } from "@angular/core";

@Injectable()
export class JWTService {
    private chars: string = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
    private atob(input) {
        var str = String(input).replace(/=+$/, '');
        if (str.length % 4 == 1) {
            throw new Error("'atob' failed: The string to be decoded is not correctly encoded.");
        }
        for (
            // initialize result and counters
            var bc = 0, bs, buffer, idx = 0, output = '';
            // get next character
            buffer = str.charAt(idx++);
            // character found in table? initialize bit storage and add its ascii value;
            ~buffer && (bs = bc % 4 ? bs * 64 + buffer : buffer,
                // and if not first of each 4 characters,
                // convert the first 8 bits to one ascii character
                bc++ % 4) ? output += String.fromCharCode(255 & bs >> (-2 * bc & 6)) : 0
        ) {
            // try to find character in table (0-63, not found => -1)
            buffer = this.chars.indexOf(buffer);
        }
        return output;
    };

    parseJwt(token) {
        var base64Url = token.split('.')[1];
        var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
        var jsonPayload = decodeURIComponent(this.atob(base64).split('').map(function (c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
        }).join(''));

        return JSON.parse(jsonPayload);
    };
}

Answer 6

在登录时存储您的令牌，如下所示：

localStorage.setItem("token")

然后像这样声明一个变量

解码令牌：任意

并使用以下代码解码令牌：

 this.decodedToken = this.jwtHelper.decodeToken(localStorage.setItem("token"));