Angular中的Http获取请求授权答案

【问题标题】：Http Get request authorization in AngularAngular中的Http获取请求授权
【发布时间】：2018-05-04 05:00:59
【问题描述】：

我正在使用一个 API，它可以为我提供 NBA 球员的姓名和统计数据。我有以下代码导致我出现 401 错误（未经授权）。

constructor (private http: Http) {}
fullName;

getPlayerName() {
    this.http.get('https://api.mysportsfeeds.com/v1.1/pull/nba/2016-2017-regular/cumulative_player_stats.json?playerstats=2PA,2PM,3PA,3PM,FTA,FTM').subscribe(data => {
        this.newdata= data.json()
        console.log(this.newdata)
this.fullName = data.json().cumulativeplayerstats.playerstatsentry[0].player.FirstName + " " + data.json().cumulativeplayerstats.playerstatsentry[0].player.LastName
}
}

如何添加用户名和密码进行身份验证？

【问题讨论】：

我不认为每次拨打电话时都提供用户名和密码来进行身份验证。你知道这个 API 是如何提供授权的吗？例如，它使用 cookie 还是 JWT？
我不确定...如果您访问我提供的链接，系统会提示您输入用户名和密码。我有一个帐户，我只需要提供我的用户名和密码。
不，你错了。您应该阅读此 API 的文档（如果存在）以了解它如何提供授权。每次都要求输入密码的 API 是没有意义的。当您使用浏览器访问页面时会看到此提示，但是当您从应用程序进行 XHR 调用时，您需要提供凭据，例如请求标头中的令牌
好吧，假设我得到了令牌...我将在代码中的哪个位置提供凭据？
也许这可以帮助mysportsfeeds.com/data-feeds/api-docs/#

标签： angular http get http-get

【解决方案1】：

你应该像这个例子那样设置http头

let headers = new Headers(); headers.append('encrypted_credentials', username + ":" + password);

this.http.get(url, { headers: headers }).subscribe(data => { });

【讨论】：

【解决方案2】：

来自官方文档：https://angular.io/guide/http#headers

One common task is adding an Authorization header to outgoing requests. Here's how you do that:


http
  .post('/api/items/add', body, {
    headers: new HttpHeaders().set('Authorization', 'my-auth-token'),
  })
  .subscribe();

HttpHeaders 类是不可变的，因此每个 set() 都会返回一个新实例并应用更改。

【讨论】：

“括号未闭合”是什么意思？
对不起我的错误它确实被关闭了。但是我不确定这段代码的去向。此外，当我插入代码时，我的文本编辑器中出现了许多错误......例如“找不到名称 HttpHeaders”。

【解决方案3】：

也许这会有所帮助：

this.http.get('https://api.mysportsfeeds.com/v1.1/pull/nba/2016-2017-regular/cumulative_player_stats.json?playerstats=2PA,2PM,3PA,3PM,FTA,FTM', {headers: new HttpHeaders().set('username', myUsername).set('password', myPassword)}).subscribe(// handle Result)

【讨论】：