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

Posted 2023-03-13

【中文标题】Angular 6 - httpClient 在 httpOptions 中传递基本身份验证

【英文标题】：Angular 6 - httpClient passing basic auth in 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 或将其直接添加到更新方法？

【参考方案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');