授权承载令牌角度5 [英] Authorization bearer token Angular 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} 
  

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

GET http：//druang.dd：8080 / user-list？_format = json 403（禁止）

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

错误在src / app / services / userlist.service.ts（33,59）中：错误TS2345：
类型'RequestOptions'的参数不能分配给参数
type'{headers ?: HttpHeaders | {[header：string]：string |串[];
};观察？：身体; params ?: Ht ...'。属性'标题'
的类型不兼容。
类型'标题'不可分配为键入'HttpHeaders | {[header：string]：string |串[]; }。
类型'Headers'不可分配为键入'{[header：string]：string |串[]; }。
'Headers'类型缺少索引签名。

任何想法？
以下是完整的 Git repo
谢谢您的帮助！

解决方案

我建议您使用一个HTTPInteceptor来处理添加标记。以下是一篇很好的文章： https://www.illucit.com/angular/en-angular-5-httpinterceptor-add-bearer-token-to-httpclient-requests/

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

从'@ 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

GET http://druang.dd:8080/user-list?_format=json 403 (Forbidden)

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

ERROR in src/app/services/userlist.service.ts(33,59): error TS2345: Argument of type 'RequestOptions' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'. Types of property 'headers' are incompatible. Type 'Headers' is not assignable to type 'HttpHeaders | { [header: string]: string | string[]; }'. Type 'Headers' is not assignable to type '{ [header: string]: string | string[]; }'. Index signature is missing in type 'Headers'.

Any idea?? Here is the full Git repo THanks 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！