时间戳

首页 > 解决方案 > 从 Web API 到 Angular 客户端，需要验证 authenication Token

angular - 从 Web API 到 Angular 客户端，需要验证 authenication Token

问题描述

我正在学习 Angular 6。从我的 web api (.net core) 中，我发送了我在 Postman 上看到的以下内容：

{"token":`{"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJqeWVlQGNvbGxhYnJhbGluay5jb20iLCJqdGkiOiI2OWVmYmIxNC0wYTBjLTQ5NjgtYjVhZi1mNDYzMTQ2ZDViNmUiLCJ1bmlxdWVfbmFtZSI6IkpvaG5ZZWUiLCJodHRwOi8vc2NoZW1hcy5taWNyb3NvZnQuY29tL3dzLzIwMDgvMDYvaWRlbnRpdHkvY2xhaW1zL3JvbGUiOlsiYWRtaW4iLCJhbmFseXN0IiwicmV2aWV3ZXIiLCJjb21taXR0ZWUiXSwibmJmIjoxNTQwMzEyODIwLCJleHAiOjE1NDAzMzA4MjAsImlzcyI6ImxvY2FsaG9zdCIsImF1ZCI6InVzZXJzIn0.GegIg2GfpvzI0PGuSIzLUsZtYa-jaGgxGP7yb5A7-CU","expiration":"2018-10-23T21:40:20Z"}`

从我的 angular 客户端调用 web api，这是我的代码

loginUser(user) : Observable<boolean> {
      var reqHeader = new HttpHeaders({ 'Content-Type': 'application/x-www-urlencoded','No-Auth':'True' });
  return  this.http
        .post('http://localhost:55009/api/login', user )
        .map((data: any) => {
          this.token = data.token;
            localStorage.setItem('userToken', data.token);
            let tokenInfo = this.getDecodedAccessToken(data.token);
console.log('token ===> ' + data.token);
console.log('token ===> ' + tokenInfo);

console.log('token ===> ' + this.token);
                //  this.token = data.token;
                //  this.tokenExpiration = this.getDecodedAccessToken(data.token).ex;
                 this.errorMessage = data.errorMessage;

                //if (this.errorMessage.length > 0) {

               //   alert(data.errorMessage);
              //    return false;
               // }
               // else {
                 // alert(data.errorMessage);

                  return true;
                })
    //  .map((response:any) => response.json())
     .catch(this.handleError);
}



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

在我的 chrome 控制台上，我只看到这个

token ===> [object Object]
login.service.ts:41 token ===> null
login.service.ts:43 token ===> [object Object]

我想验证我是否获得了有效的令牌，并且能够查看令牌内容和到期日期。我安装了 jwt-decode，但它在我返回时不起作用。

任何帮助是极大的赞赏。

谢谢

标签： angulartypescripttoken

解决方案

通过将您的响应放在一些 json lint 上，您已经可以看到它不是有效的 json，但假设它看起来像这样：

{ <- this is where your 'data' start
    "token": { <- this is property of 'data', and it's object
        "token":  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJqeWVlQGNvbGxhYnJhbGluay5jb20iLCJqdGkiOiI2OWVmYmIxNC0wYTBjLTQ5NjgtYjVhZi1mNDYzMTQ2ZDViNmUiLCJ1bmlxdWVfbmFtZSI6IkpvaG5ZZWUiLCJodHRwOi8vc2NoZW1hcy5taWNyb3NvZnQuY29tL3dzLzIwMDgvMDYvaWRlbnRpdHkvY2xhaW1zL3JvbGUiOlsiYWRtaW4iLCJhbmFseXN0IiwicmV2aWV3ZXIiLCJjb21taXR0ZWUiXSwibmJmIjoxNTQwMzEyODIwLCJleHAiOjE1NDAzMzA4MjAsImlzcyI6ImxvY2FsaG9zdCIsImF1ZCI6InVzZXJzIn0.GegIg2GfpvzI0PGuSIzLUsZtYa-jaGgxGP7yb5A7-CU",
        "expiration": "2018-10-23T21:40:20Z"
    }
}

因此，如果您想获得实际令牌，则eyJhbGciOiJIUzI1NiI...需要致电data.token.token.

推荐阅读