从 Web API 到 Angular 客户端，需要验证鉴权 Token答案

【问题标题】：From Web API to Angular client, need to verify authenication Token从 Web API 到 Angular 客户端，需要验证鉴权 Token
【发布时间】：2018-10-23 16:49:37
【问题描述】：

我正在学习 Angular 6。通过我的 web api（.net 核心），我发送了我在 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，但它在我返回时不起作用。

非常感谢任何帮助。

谢谢

【问题讨论】：

根据你的邮递员回复，在你的代码中，得到它不是data.token.token而不是data.token吗？

标签： angular typescript token

【解决方案1】：

通过将您的响应放在一些 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。

【讨论】：

谢谢。我现在看到了令牌。