授权不记名令牌Angular 5 [英] Authorization bearer token Angular 5

问题描述

我对如何在 Angular 5 中为简单的 Get 请求创建一个好的标头感到困惑.

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

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

This is what I need to do in 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)
    return users
            .catch(this.handleError.handleError);         
  }

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

This is the response in my console.log:

<代码> { 方法":空， 报头":{ 授权":[ 承载eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImYwODZlM2FiYTk0ZjVhMjVmNDhiNzlkYmI2YWUwOWY4YzE2MTUyMzg2N2I5MDZiY2MzNWQyNWJiYTZmYTE4YjEwZjA1MjZiNThkZjE2Y2FjIn0.eyJhdWQiOiJmMDExY2M1OC00MGNlLTQzYTktOGY3MS04NDI0OTRlM2E5OTciLCJqdGkiOiJmMDg2ZTNhYmE5NGY1YTI1ZjQ4Yjc5ZGJiNmFlMDlmOGMxNjE1MjM4NjdiOTA2YmNjMzVkMjViYmE2ZmExOGIxMGYwNTI2YjU4ZGYxNmNhYyIsImlhdCI6MTUyMzU1MTQ0NSwibmJmIjoxNTIzNTUxNDQ1LCJleHAiOjE1MjM1NTQ0NDUsInN1YiI6IjIiLCJzY29wZXMiOlsiYXV0aGVudGljYXRlZCIsImFuZ3VkcnUiXX0.E-WdQTl7nPDW0gj0rohfql-QgnAinzvDxPR-pySMrG07XFY9tA6Ex7IL23pDBmKDmQO8RcZKa0L5r6SRQq9_iqzMWzn5Zxp94J9TJrpZ2KGMoLR_FbK_tpC5G5q5vUnCe3q34sH7cPdT_2cI704OWWaYmIUKKpXWUIG0PJw_uKSJ_uOifPv59RZGQkoaQ9gPywDKe-uamm1Faug-Kk2YnFMoEJq7ou19zyxgdpX80ZTPUae67uB0PGLRuvxfGaqVsJ8k0NunAY3-pyUnBwR_3eeuOxf4TyfW2aiOJ9kuPgsfV4Z1JD7nMpNtTHMJaXEyNkBW8RlYHD1pj4dkdnsDmw"]}， 身体":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(禁止)

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

还有另一个线索可以解开这个谜团.在 Sublime 文本中，如果我将鼠标放在 opts 上，它会说:

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

src/app/services/userlist.service.ts(33,59) 中的错误:错误 TS2345:'RequestOptions' 类型的参数不可分配给输入'{标头?:HttpHeaders |{ [标题:字符串]:字符串 |细绳[];};观察?:身体"；参数?:Ht...'.属性标题"的类型不兼容.类型 'Headers' 不可分配给类型 'HttpHeaders |{ [标题:字符串]:字符串 |细绳[];}'.类型 'Headers' 不可分配给类型 '{ [header: string]: string |细绳[];}'.标头"类型中缺少索引签名.

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'.

有什么想法吗??这是完整的 Git repo感谢您的帮助！

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

推荐答案

我建议使用 HttpInterceptor 来设置传出请求的默认 HTTP 标头，而不是为每个调用添加额外的 HTTP 标头.

I suggest to use HttpInterceptor for setting default HTTP headers on outgoing requests rather than adding an additional HTTP header to each call.

HTTP 客户端 - 设置默认标头 @ angular.io

在您的示例中，您可以执行以下操作:

In your example you can do the following:

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

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

这篇关于授权不记名令牌Angular 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！