Angular 6 - httpClient 在 httpOptions 中传递基本身份验证答案

【问题标题】：Angular 6 - httpClient passing basic auth in httpOptionsAngular 6 - httpClient 在 httpOptions 中传递基本身份验证
【发布时间】：2018-11-14 15:14:24
【问题描述】：

我在 Angular 6 中有一项服务，我正在尝试更改记录，但它说我没有被授权。

现在我有这个：

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json'})
};

  update(id, title, content) {
    const updateData = { id: id, title: title, content: content };
      return this.http.put(`http://myurl/${id}`, updateData, httpOptions);
  }

我的问题是：

如何将基本授权添加到我的 httpOptions 或将其直接添加到更新方法？

【问题讨论】：

标签： angular typescript angular6

【解决方案1】：

只需像这样在标题中添加您的令牌/授权 -

let httpHeaders = new HttpHeaders()
              .set('authorization', this.authorizationHeaderValue)
              .set('Content-Type', application/json);

两者都有 set 和 append 等方法。 set 构造一个带有新值的新主体， append 构造一个带有附加值的新主体

PS：这里我假设变量 (this.authorizationHeaderValue) 值是包含值，例如 Bearer 或 Basic 或任何需要的值，请相应地更改它。

更多内容请阅读这里

https://www.concretepage.com/angular-2/angular-httpclient-get-example#parameters

【讨论】：

可能是第2行的逗号
哦，那只是一个拼写错误。无论如何，不值得为此投反对票，谢谢您指出:)
您的授权标头错误。 “授权”和值通常在实际令牌（不是空格）前面有“基本”或“摘要”或“承载”字样。如果这是一个 OAuth 令牌，那么您将在 authtoken 前面使用“Bearer”
我想知道这是不是你的意思。但是变量名称只是“authToken”，我认为它只是令牌本身，而不是授权标头字符串（我可能会将变量命名为“authorizationHeaderValue”或类似的名称。
你说得对，变量名可能比简单的authToken 更好，会按照你的建议更新变量名。谢谢@KevinM

【解决方案2】：

您可以通过在标题中附加基本授权来添加它，如下所示：

var headers_object = new HttpHeaders();
headers_object.append('Content-Type', 'application/json');
headers_object.append("Authorization", "Basic " + btoa("username:password"));

const httpOptions = {
  headers: headers_object
};

【讨论】：

这就是我所追求的，但我如何将其添加到此： const httpOptions = { headers: new HttpHeaders({'Content-Type': 'application/json'}) };跨度>
出现错误：'{ headers: Headers; 类型的参数； }' 不能分配给类型为 '{ headers?: HttpHeaders | { [标题：字符串]：字符串 |细绳[]; };
您必须在 header 参数中分配 header 变量。 H 必须小写。我已经更新了解决方案以避免混淆。
new Headers(); 应该是new HttpHeaders()
@PardeepJain 它在 Angular 4 中工作。我已经更新了 Angular 5/6 的答案。谢谢。

【解决方案3】：

查看 angular.io 文档，非常简单。

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'Basic my-auth-token'
  })
};

您可以像以前一样使用httpOptions 常量。

欲了解更多信息：https://angular.io/guide/http#adding-headers

PS：这是一种适用于小型或快速应用程序的方法，如果您想构建更强大的应用程序，请考虑使用自动添加授权标头的 HTTP 拦截器。

【讨论】：

嗨，朋友，我有 2 个服务，例如，用于登录的 authservice 和用于获取数据的 userService，登录后我设置 localstorage 并创建令牌，在 userService 中我试图获取令牌但没有成功 const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Authorization': 'Bearer' + localStorage.getItem('token') }) };它没有得到令牌，知道吗？

【解决方案4】：

在 httpOptions 中传递基本身份验证的 httpClient 在 Angular 6 中是不同的

let httpHeaders= new HttpHeaders();
httpHeaders.append('Content-Type', 'application/json');
httpHeaders.append("Authorization", "Basic " + btoa("username:password"));

const httpOptions = {
  headers: httpHeaders
};

update(id, title, content) {
    const updateData = { id: id, title: title, content: content };
      return this.http.put(`http://myurl/${id}`, updateData, httpOptions);
  }

【讨论】：

【解决方案5】：

import { HttpClient, HttpHeaders } from '@angular/common/http';

var headers = new HttpHeaders();

var token = localStorage.getItem('token');

headers.append('Content-Type', 'application/json');

headers.append("Authorization", "Basic " + token));

const httpOptions = {
  headers: headers
};

【讨论】：

localStorage.getItem 用于在设置为本地存储的情况下将令牌值获取到本地存储。

【解决方案6】：

const httpOptions = {
  headers: new HttpHeaders(
    {
      'Content-Type': 'application/json',
      'Authorization': `Basic ` + btoa('user:password'),
    }
  )
};


return this.http.post<any>(
      `apilink`,{},
      httpOptions
    ).pipe(map(res => {
      return res;
}));

【讨论】：

欢迎来到 SO。您应该在答案中添加一些解释。

【解决方案7】：

许多服务器需要额外的标头来进行保存操作。例如，服务器可能需要授权令牌或“Content-Type”标头来显式声明请求正文的 MIME 类型。在您的情况下，您可以通过以下代码进行基本授权。

import { HttpHeaders } from '@angular/common/http'; 
const httpOptions = {headers: new HttpHeaders({
'Content-Type':  'application/json',
Authorization: 'my-auth-token' })};

您可以在发出下一个请求之前更新授权标头

httpOptions.headers =  httpOptions.headers.set('Authorization', 'my-new-auth-token');

【讨论】：