如何在角度5中解码客户端的JWT编码令牌有效负载?

时间:2018-01-03 10:37:21

标签: angular jwt decode access-token

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

Caused by: java.io.FileNotFoundException: Error loading metadata for index file: segments_2j|M|Course
 at org.infinispan.lucene.impl.DirectoryImplementor.openInput(DirectoryImplementor.java:134)
 at org.infinispan.lucene.impl.DirectoryLuceneV4.openInput(DirectoryLuceneV4.java:101)
 at org.apache.lucene.store.Directory.openChecksumInput(Directory.java:113)
 at org.apache.lucene.index.SegmentInfos.read(SegmentInfos.java:341)
 at org.apache.lucene.index.StandardDirectoryReader$1.doBody(StandardDirectoryReader.java:57)
 at org.apache.lucene.index.SegmentInfos$FindSegmentsFile.run(SegmentInfos.java:923)
 at org.apache.lucene.index.StandardDirectoryReader.open(StandardDirectoryReader.java:53)
 at org.apache.lucene.index.DirectoryReader.open(DirectoryReader.java:67)
 at org.hibernate.search.indexes.impl.SharingBufferReaderProvider.readerFactory(SharingBufferReaderProvider.java:131)
 at org.hibernate.search.indexes.impl.SharingBufferReaderProvider$PerDirectoryLatestReader.<init>(SharingBufferReaderProvider.java:206)
 at org.hibernate.search.indexes.impl.SharingBufferReaderProvider.createReader(SharingBufferReaderProvider.java:108)
 ... 24 more

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

5 个答案:

答案 0 :(得分:44)

我使用jwt-decode包来解码角度为5的JWT令牌;这个包对我很好。

通过此命令安装包之后:

npm install jwt-decode

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

import * as jwt_decode from "jwt-decode";

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

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

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

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

示例:

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 是一个小型浏览器库,可帮助解码编码为Base64Url的JWT令牌。

     

重要事项:此库未验证令牌,任何格式良好的JWT都可以解码。你应该验证你的令牌   使用像express-jwt,koa-jwt,Owin这样的服务器端逻辑   持票人JWT等

答案 1 :(得分:16)

使用 @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);

答案 2 :(得分:13)

尝试并使用JavaScript内置函数SELECT YEAR(p.created_at) AS YEAR, SUM( CASE WHEN p.status = 0 THEN p.amount END) AS Total_0, SUM( CASE WHEN p.status = 1 THEN p.amount END) AS Total_1 FROM app_payments p INNER JOIN app_users u ON p.created_by = u.serial WHERE p.created_by = 'd88faa' GROUP BY YEAR(p.created_at); 。有点像这样:

atob()

注意:令牌实际上是一个字符串。

如果您想知道为什么我在这里拆分令牌,则应访问此网站jwt.io

答案 3 :(得分:1)

atob 函数无法正确解析西里尔字母或希伯来语,因此我必须改用 JwtHelperService()。decodeToken(token)

答案 4 :(得分:0)

我已经如下定义了我的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);
    };
}