Angular：使用 HttpClient 的 RequestOptions 等价物答案

【问题标题】：Angular : Using the equivalent of RequestOptions of Http with HttpClientAngular：使用 HttpClient 的 RequestOptions 等价物
【发布时间】：2018-05-30 14:04:37
【问题描述】：

我正在从 Http 迁移到 HttpClient 我习惯将一些 headers 添加到我的 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 的等价物，并且整个处理都没有添加相同的标题。

建议？？

【问题讨论】：

HttpParams是新版本，从同一个地方导入

标签： angular typescript angular-http angular-httpclient

【解决方案1】：

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)

你也可以看看this question

【讨论】：

【解决方案2】：

根据https://angular.io/guide/deprecationsRequestOptions被HttpRequest替换

【讨论】：

【解决方案3】：

http 客户端等效项应该是：

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

【讨论】：

属性“标题”的类型不兼容。类型“HttpParams”不可分配给类型“HttpHeaders”

【解决方案4】：

我以前通过在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 令牌的原因。希望对您有所帮助！

【讨论】：