web-dev-qa-db-ja.com

Angular 6-httpClientがhttpOptionsで基本認証を渡す

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に基本認証を追加するにはどうすればよいですか、または更新メソッドに直接追加しますか？

angulartypescriptangular6
12
MarkHill2018

次のように、ヘッダーに追加することで基本認証を追加できます。

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

Angular.ioのドキュメントを見ると、非常に簡単です。

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

また、httpOptions定数を使用できます。

詳細： https://angular.io/guide/http#adding-headers

6
Mehdi Benmoha

このようにヘッダーにトークン/承認を追加するだけです-

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

どちらにもsetやappendなどのメソッドがあります。 setは、新しい値を持つ新しいボディを構築し、appendは値が付加された新しいボディを構築します

PS：ここでは、変数（this.authorizationHeaderValue）の値がBearerやBasicなどの値に含まれていると想定しています。必要に応じて変更してください。

詳細はこちらをご覧ください

4
Pardeep Jain