Angular 角度：与HttpClient使用Http的RequestOptions等效

我正在从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等效的方法，整个处理过程都没有添加相同的头

---

建议？？？

http客户端等效物应为：

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

---

HttpClient.post

方法具有以下签名：

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

其中

选项类型

如下（相当于

请求选项

）

从那里，您可以指定标头或参数，如：

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


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

---

您还可以通过在我的

getHeaders（token）

服务中创建一个方法来查看我以前所做的工作：

然后，在发出请求时，只需将其附加到请求中，如下所示：

this.http.post（url，body，this.getHeaders（token））

还有一个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());
  }
}

@Injectable（）
导出类TokenInterceptor实现HttpInterceptor{
afAuth：任何；
建造师(
私人注射器
) { }
拦截（请求：HttpRequest，下一步：HttpHandler）：可观察{
this.afAuth=this.inj.get（AngularFireAuth）；
返回此.getToken（）.pipe(
开关映射（令牌=>{
request=request.clone({
集合标题：{
授权：`Bearer${token}`
}
});
下一步返回。处理（请求）；
})
);
}
getToken（）{
返回Observable.fromPromise（this.afAuth.auth.currentUser.getIdToken（））；
}
}

然后，您需要将其提供给顶级app.module，如下所示：

{provide:HTTP_拦截器，useClass:TokenInterceptor，multi:true}

这里所做的是为自动处理的每个HTTP请求设置授权令牌，这样您就不必在发出请求之前等待令牌。请记住，这是Firebase Auth特有的，因为这就是JWT令牌的来源。希望这能有所帮助
 根据
RequestOptions
替换为
HttpRequest
HttpParams
是从同一位置导入的新版本。属性“头”的类型不兼容。类型“HttpParams”不可分配给类型“HttpHeaders”
  getHeaders(token) {
    return new HttpHeaders().set('Authorization', `Bearer ${token}`);
  }

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