如何在客户端以 angular 解码 JWT 编码的令牌有效负载? [英] How to decode the JWT encoded token payload on client-side in angular?

问题描述

作为响应，我从我的 API 获取了一个 JWT 编码的访问令牌.但我无法解码它并以 JSON 格式获取它.我尝试使用 angular2-jwt 库，但没有奏效.我在下面写我的代码:

 setXAuthorizationToken(client){让 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, {标头:请求标头}).map(res=>res.json()).subscribe((令牌) =>{if(!token.access_token){返回;}别的{var decompressToken = LZString.decompressFromEncodedURIComponent(token.access_token);控制台日志(解压令牌)；}});}

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

解决方案

我使用 jwt-decode 包在 angular 5 中解码 JWT 令牌；这个包很好用.

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

npm install jwt-decode

通过以下语法将此包导入您的 TypeScript 类:

import * as jwt_decode from "jwt-decode";

对于较新版本(3 及以上):

从'jwt-decode'导入jwt_decode；

并使用此库方法来解码您的访问令牌

 getDecodedAccessToken(token: string): any {尝试{返回 jwt_decode(token);}捕捉(错误){返回空；}}

token 参数定义从 API 获取的访问令牌

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

示例:

let tokenInfo = this.getDecodedAccessToken(token);//解码令牌让 expireDate = tokenInfo.exp;//获取令牌到期日期时间控制台日志(令牌信息)；//在控制台中显示解码的令牌对象

<块引用>

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

重要提示:此库不验证令牌，任何格式良好的 JWT 都可以解码.您应该验证您的令牌使用诸如 express-jwt、koa-jwt、Owin 之类的东西的服务器端逻辑承载JWT等

I am getting one JWT encoded access token from my API in response. But I am not able to decode it and get it in JSON format. I tried using the angular2-jwt library for it, but it did not worked. I am writing my code below:

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

Can anybody please help me solve this issue?

解决方案

I use jwt-decode package for decoding JWT token in angular 5; this package works me fine.

after install the package through this command:

npm install jwt-decode

import this package into your TypeScript class through this syntax:

import * as jwt_decode from "jwt-decode";

For newer version (3 and above):

import jwt_decode from 'jwt-decode';

and use this library method for decoding your access token like this

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

token parameter define your access token which gets from your API

jwt_decode method return decoded token info as an object; you can access any info into your token.

Example:

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

jwt-decode is a small browser library that helps to decode JWTs token which is Base64Url encoded.

IMPORTANT: This library doesn't validate the token, any well formed JWT can be decoded. You should validate the token in your server-side logic by using something like express-jwt, koa-jwt, Owin Bearer JWT, etc.

这篇关于如何在客户端以 angular 解码 JWT 编码的令牌有效负载?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！