Angular: использование эквивалента RequestOptions для Http с HttpClient

я перехожу с Http на HttpClient. Я добавляю некоторые заголовки в свои http-запросы, например:

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 , и при всей обработке не удалось добавить те же заголовки.

Предложения??


typescript angular angular-httpclient angular-http
person firasKoubaa    schedule 30.05.2018    source источник
comment
HttpParams - новая версия, импортированная оттуда же   -  person Z. Bagley    schedule 30.05.2018

Ответы (4)


arrow_upward
12
arrow_downward

Метод 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)

Вы также можете взглянуть на этот вопрос

person J. Pichardo    schedule 30.05.2018

arrow_upward
1
arrow_downward

Согласно https://angular.io/guide/deprecations RequestOptions был заменен на HttpRequest

person Durid Ahmad    schedule 06.11.2019

arrow_upward
0
arrow_downward

Эквивалент клиента http должен быть:

const headers = new HttpParams().set('Authorization', pass);
return this.httpClient.post(myServiceUrl, {}, {headers: headers});
person Mike Tung    schedule 30.05.2018
comment
Типы заголовков свойства несовместимы. Тип «HttpParams» не может быть назначен типу «HttpHeaders». - person firasKoubaa; 30.05.2018

arrow_upward
0
arrow_downward

Я сделал это раньше, создав метод в моей службе 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. Надеюсь, это может помочь!

person Nicholas Pesa    schedule 30.05.2018