本文介绍了授权承载令牌角度5的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



这是我在Angular中需要做的事情:



这是我到目前为止:

  getUserList():Observable< UserList []> {
const headers = new Headers();
let tokenParse = JSON.parse(this.token)
headers.append('Authorization',`Bearer $ {tokenParse}`);
const opts = new RequestOptions({headers:headers});
console.log(JSON.stringify(opts));
const users = this.http.get< UserList []>(this.mainUrl,opts)
返回用户
.catch(this.handleError.handleError);

这是我的console.log中的响应:

  { 方法:空, 报头:{ 授权:[承载eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImYwODZlM2FiYTk0ZjVhMjVmNDhiNzlkYmI2YWUwOWY4YzE2MTUyMzg2N2I5MDZiY2MzNWQyNWJiYTZmYTE4YjEwZjA1MjZiNThkZjE2Y2FjIn0.eyJhdWQiOiJmMDExY2M1OC00MGNlLTQzYTktOGY3MS04NDI0OTRlM2E5OTciLCJqdGkiOiJmMDg2ZTNhYmE5NGY1YTI1ZjQ4Yjc5ZGJiNmFlMDlmOGMxNjE1MjM4NjdiOTA2YmNjMzVkMjViYmE2ZmExOGIxMGYwNTI2YjU4ZGYxNmNhYyIsImlhdCI6MTUyMzU1MTQ0NSwibmJmIjoxNTIzNTUxNDQ1LCJleHAiOjE1MjM1NTQ0NDUsInN1YiI6IjIiLCJzY29wZXMiOlsiYXV0aGVudGljYXRlZCIsImFuZ3VkcnUiXX0.E-WdQTl7nPDW0gj0rohfql-QgnAinzvDxPR-pySMrG07XFY9tA6Ex7IL23pDBmKDmQO8RcZKa0L5r6SRQq9_iqzMWzn5Zxp94J9TJrpZ2KGMoLR_FbK_tpC5G5q5vUnCe3q34sH7cPdT_2cI704OWWaYmIUKKpXWUIG0PJw_uKSJ_uOifPv59RZGQkoaQ9gPywDKe-uamm1Faug -Kk2YnFMoEJq7ou19zyxgdpX80ZTPUae67uB0PGLRuvxfGaqVsJ8k0NunAY3-pyUnBwR_3eeuOxf4TyfW2aiOJ9kuPgsfV4Z1JD7nMpNtTHMJaXEyNkBW8RlYHD1pj4dkdnsDmw ]}, 身体 :空, URL :空 withCredentials:null,responseType:null} 

它看起来很漂亮。但给了我这个错误

解决这个谜题还有另一条线索。在Sublime文本中,如果将鼠标放在 opts 上,它会显示如下内容:

任何想法?
以下是完整的
谢谢您的帮助!

解决方案

我建议您使用一个HTTPInteceptor来处理添加标记。以下是一篇很好的文章:

-----解决问题的另一种方法。 -----



从'@ angular / http'导入{Http,Headers,Response};



getLoggedInUser(auth_token):Observable< any> {
const headers = new Headers({
'Content-Type':'application / json',
'Authorization':auth_token
})
return this。 http.get(apiUrl,{headers:headers})
}



不要忘记在组件中调用和订阅。


I am confused about how to create a good header for a simple Get request in Angular 5.

This is what I need to do in Angular:

This is what I have so far:

  getUserList(): Observable<UserList[]> {
    const headers = new Headers();
    let tokenParse = JSON.parse(this.token)
    headers.append('Authorization', `Bearer ${tokenParse}`);
    const opts = new RequestOptions({ headers: headers });
    console.log(JSON.stringify(opts));
    const users = this.http.get<UserList[]>(this.mainUrl, opts)
    return users
            .catch(this.handleError.handleError);
  }

This is the response in my console.log:

{"method":null,"headers":{"Authorization":["Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImYwODZlM2FiYTk0ZjVhMjVmNDhiNzlkYmI2YWUwOWY4YzE2MTUyMzg2N2I5MDZiY2MzNWQyNWJiYTZmYTE4YjEwZjA1MjZiNThkZjE2Y2FjIn0.eyJhdWQiOiJmMDExY2M1OC00MGNlLTQzYTktOGY3MS04NDI0OTRlM2E5OTciLCJqdGkiOiJmMDg2ZTNhYmE5NGY1YTI1ZjQ4Yjc5ZGJiNmFlMDlmOGMxNjE1MjM4NjdiOTA2YmNjMzVkMjViYmE2ZmExOGIxMGYwNTI2YjU4ZGYxNmNhYyIsImlhdCI6MTUyMzU1MTQ0NSwibmJmIjoxNTIzNTUxNDQ1LCJleHAiOjE1MjM1NTQ0NDUsInN1YiI6IjIiLCJzY29wZXMiOlsiYXV0aGVudGljYXRlZCIsImFuZ3VkcnUiXX0.E-WdQTl7nPDW0gj0rohfql-QgnAinzvDxPR-pySMrG07XFY9tA6Ex7IL23pDBmKDmQO8RcZKa0L5r6SRQq9_iqzMWzn5Zxp94J9TJrpZ2KGMoLR_FbK_tpC5G5q5vUnCe3q34sH7cPdT_2cI704OWWaYmIUKKpXWUIG0PJw_uKSJ_uOifPv59RZGQkoaQ9gPywDKe-uamm1Faug-Kk2YnFMoEJq7ou19zyxgdpX80ZTPUae67uB0PGLRuvxfGaqVsJ8k0NunAY3-pyUnBwR_3eeuOxf4TyfW2aiOJ9kuPgsfV4Z1JD7nMpNtTHMJaXEyNkBW8RlYHD1pj4dkdnsDmw"]},"body":null,"url":null,"withCredentials":null,"responseType":null}

It looks pretty. But gives me this error

There is another clue to solve this mystery. In Sublime text, If I put the mouse over opts it says something like:

Any idea??Here is the full Git repoTHanks for your help!

解决方案

I would suggest you to use an HTTPInteceptor which would take care of adding the token. Here is a great article to achieve that: https://www.illucit.com/angular/en-angular-5-httpinterceptor-add-bearer-token-to-httpclient-requests/

----- Another Way of solving the issue. -----

import { Http, Headers, Response } from '@angular/http';

getLoggedInUser(auth_token): Observable<any> { const headers = new Headers({ 'Content-Type': 'application/json', 'Authorization': auth_token }) return this.http.get(apiUrl, { headers: headers }) }

And do not forget to call and subscribe in your Component.

这篇关于授权承载令牌角度5的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-22 13:48
查看更多