Angular客户端如何解码JWT编码访问令牌？求解决方案

我从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);
      }
    });
}

请问有人能帮我解决这个问题吗？

你好，咱们来一步步排查你解码JWT令牌遇到的问题：

1. 先理清JWT的基础逻辑 #

正常的JWT是由三个用.分隔的Base64URL编码段组成的（Header、Payload、Signature），本身不需要用LZString解压缩——除非你的后端明确对JWT做了压缩处理。你现在直接用解压缩的方式处理，大概率是方向错了。

2. 用angular2-jwt正确解码的姿势 #

angular2-jwt的JwtHelperService是专门处理JWT的工具，你可以按下面的步骤修改代码：

首先确保你已经正确导入并注入服务：

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

// 在你的组件或Service的构造函数中注入
constructor(private jwtHelper: JwtHelperService) {}

然后修改订阅回调里的逻辑：

.subscribe((token) =>{
  if(!token.access_token){
    return;
  } else{
    // 直接解码JWT的Payload部分
    const decodedPayload = this.jwtHelper.decodeToken(token.access_token);
    console.log('解码后的Payload:', decodedPayload);
    
    // 额外：如果需要验证令牌是否过期，也可以用这个方法
    const isTokenExpired = this.jwtHelper.isTokenExpired(token.access_token);
    console.log('令牌是否过期:', isTokenExpired);
  }
});

3. 如果后端确实对JWT做了压缩处理 #

要是你的API返回的JWT真的是经过LZString压缩的，那你需要先解压缩得到标准JWT字符串，再用angular2-jwt解码：

.subscribe((token) =>{
  if(!token.access_token){
    return;
  } else{
    const decompressedToken = LZString.decompressFromEncodedURIComponent(token.access_token);
    // 先确认解压缩后的内容是标准JWT格式（包含两个`.`）
    console.log('解压缩后的JWT:', decompressedToken);
    
    if(decompressedToken && decompressedToken.includes('.')){
      const decodedPayload = this.jwtHelper.decodeToken(decompressedToken);
      console.log('解码后的Payload:', decodedPayload);
    } else {
      console.error('解压缩后的内容不是标准JWT格式，请检查后端压缩逻辑');
    }
  }
});

4. 快速验证令牌有效性 #

你可以先在控制台打印token.access_token，看看它的格式：

• 如果是xxxxxx.yyyyyy.zzzzzz这种三段式结构，那就是标准JWT，直接用angular2-jwt解码即可
• 如果是一串无分隔符的奇怪编码，再考虑是否需要解压缩

另外，你也可以把令牌复制到本地JWT调试工具里，快速判断令牌本身是否有效。

内容的提问来源于stack exchange，提问作者Sunny Parekh