web-dev-qa-db-ja.com

Angular：HttpClientでHttpのRequestOptionsに相当するものを使用する

私はHttpからHttpClientに移行しています---を次のようにhttpリクエストに追加しますheaders：

import { RequestOptions, Request, RequestMethod, Headers } from '@angular/http';


this.pass = btoa(cuid + ': ');
this.pass = "Basic " + this.pass;
this.header = new Headers();
this.header.set("Authorization", this.pass);
let options = new RequestOptions({
  headers: this.header
});

return this.http.post(myServiceUrl, {}, options)

HttpClientに移行するとき、私はこれを試しました：

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

    const header = new HttpHeaders();
    const pass = 'Basic ' + btoa(cuid + ': ');
    header.set('Authorization', pass);
    const options =  ({
      headers: header
    });
    return this.httpClient.post(myServiceUrl, {}, options);

しかし、ご覧のとおり、iventはRequestOptionsに相当するものを見つけ、処理全体で同じヘッダーを追加できませんでした。

提案??

angulartypescriptangular-httpangular-httpclient
3
firasKoubaa

HttpClient.postメソッドには次のシグネチャがあります：

post(url: string, body: any | null, options: OptionsType)

OptionsTypeは次のとおりです（RequestOptionsと同等）

{
  headers?: HttpHeaders | { [header: string]: string | string[] };
  observe?: "body";
  params?: HttpParams | { [param: string]: string | string[] };
  reportProgress?: boolean;
  responseType: "arraybuffer";
  withCredentials?: boolean;
};

そこから、次のようにヘッダーまたはパラメータを割り当てることができます。

const options = {
  headers: new HttpHeaders().append('key', 'value'),
  params: new HttpParams().append('key', 'value')
}


this.httpClient.post(url, {}, options)

あなたも見ることができます この質問

2
J. Pichardo

getHeaders(token)のサービスでメソッドを作成することにより、これを以前に行いました

_  getHeaders(token) {
    return new HttpHeaders().set('Authorization', `Bearer ${token}`);
  }
_

次に、リクエストを作成するときに、次のようにこれをリクエストに追加します。

this.http.post(url, body, this.getHeaders(token));

リクエストに対してこれを自動化できる調査対象のHttpInterceptorもあります。これに関する記事は次のとおりです。 https://www.intertech.com/Blog/angular-4-tutorial-handling-refresh-token- with-new-httpinterceptor /

このような私のトークンにFirebase Authを使用してこれを行いました。以下は、token.interceptor.tsファイルです。

_@Injectable()
export class TokenInterceptor implements HttpInterceptor {

  afAuth: any;

  constructor(
    private inj: Injector
  ) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.afAuth = this.inj.get(AngularFireAuth);

    return this.getToken().pipe(
      switchMap(token => {
        request = request.clone({
          setHeaders: {
            Authorization: `Bearer ${token}`
          }
        });

        return next.handle(request);
      })
    );
  }

  getToken() {
    return Observable.fromPromise(this.afAuth.auth.currentUser.getIdToken());
  }
}
_

次に、これをトップレベルのapp.moduleに次のように提供する必要があります。

_{ provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }_

ここでは、自動的に処理されるすべてのHTTPリクエストに認証トークンを設定しているため、リクエストを行う前にトークンを待つ必要がありません。これはFirebase Authに非常に特有であり、JWTトークンを取得するためです。これがお役に立てば幸いです。

0
Nicholas Pesa

https://angular.io/guide/deprecations によると、RequestOptionsはHttpRequestに置き換えられました

0
Durid Ahmad

対応するhttpクライアントは次のようになります。

const headers = new HttpParams().set('Authorization', pass);
return this.httpClient.post(myServiceUrl, {}, {headers: headers});
0
Mike Tung