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

Question

我有一个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中，或者我直接将其添加到更新方法中？

- user9855223

Answer 1

你可以通过在标头中添加以下内容来添加基本授权：

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
};

- Prachi

---

这就是我想要的，但是我该如何将其添加到以下内容中： const httpOptions = { headers: new HttpHeaders({'Content-Type': 'application/json'}) }; - user9855223

你必须在header参数中分配header变量。H必须小写。我已经更新了解决方案以避免混淆。 - Prachi

“new Headers();” 应该改为 “new HttpHeaders()”。 - Pardeep Jain

@PardeepJain 它在Angular 4中运行。我已经更新了适用于Angular 5/6的答案。谢谢。 - Prachi

是的，因为根据问题细节，OP正在使用v-5/6。 - Pardeep Jain

Answer 2

看 Angular.io 文档，非常简单明了。

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

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

更多信息请参见：https://angular.io/guide/http#adding-headers

注意：这是一种适用于小型或快速应用程序的方法，如果要构建更健壮的应用程序，请考虑使用HTTP拦截器，在运行时自动添加授权头。

- Mehdi Benmoha

---

嗨，朋友，我有两个服务，例如authservice用于登录和userService用于获取数据，在登录后我设置了localstorage并创建了令牌，在userService中我尝试获取令牌但没有成功。const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + localStorage.getItem('token') }) }; 它无法获取令牌，有任何想法吗？ - Rafael Moura

Answer 3

只需在标题中添加您的令牌/授权，如下所示 -

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

两者都有set和append方法。set构建一个新的body并赋予新值，而append则在原来的body后面添加新值构建一个新的body。

注：这里假设变量(this.authorizationHeaderValue)的值包括像Bearer或Basic等所需的值，请根据实际情况进行更改。

更多信息请参见此处：

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

- Pardeep Jain

---

很可能是第二行的逗号。 - Joakim

哦，那只是一个打字错误。无论如何也不应该因此受到贬值，谢谢指出 :) - Pardeep Jain

您的授权头信息有误。"Authorization" 通常包含 "Basic "、"Digest " 或 "Bearer " 等词语，这些词语在实际令牌（不是空格）之前。如果这是 OAuth 令牌，则应在 authtoken 前面使用 "Bearer "。 - Kevin M

我想知道你是否是在暗示这个。但是，由于变量名只是“authToken”，我认为它只是令牌本身，而不是授权头字符串（我可能会将变量命名为“authorizationHeaderValue”或类似的名称）。 - Kevin M

你说得对，变量名可以更好，而不仅仅是 authToken，我会按照你的建议更新变量名。谢谢 @KevinM - Pardeep Jain

Answer 4

在Angular 6中，通过httpOptions传递基本身份验证的httpClient与以前不同。

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);
  }

- Rohit.007

Answer 5

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;
}));

- A. Fantinato

---

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

Answer 6

许多服务器需要额外的标头进行保存操作。例如，服务器可能需要授权令牌或“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');

- Sadaqat Ali

Answer 7

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
};

- Sanket Jadav

---

localStorage.getItem 用于获取本地存储中设置的令牌值。 - Sanket Jadav