Angular 如何为所有使用服务的api请求使用通用头？

我在angular4电子商务项目中工作。这里我需要不同的api调用，来自后端，具有带有密钥和密钥的公共头。我在一个服务中保留了所有api URL，每当有api调用时，我都在使用该服务。这里我在每次api调用时声明头。但我想将这些头作为全局头放在同一个服务中，因此，我也可以使用该服务使用标头。我的问题是，我无法在服务中使用所有api请求所共有的标头。如何在angular中实现此标头？请帮助我。以下是我的代码： //服务

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import {Http, Headers} from '@angular/http';

@Injectable()
export class SharedServiceService {
public static headers = new Headers();
    public static baseUrl='https://www.t3stores.com/mystores/wordpress/';
    public static baseUrl2='https://colourssoftware.com/T3Liquors/';
    public static newCollections=SharedServiceService.baseUrl+'wp-json/wc/v2/products?tag=882';
public static productsApi=SharedServiceService.baseUrl+'wp-json/wc/v2/products?page=1&per_page=100';
    public static products=SharedServiceService.baseUrl;
    }

    //headers:
      createAuthorizationHeader(headers: Headers) {
        headers.append('Authorization', 'Basic ' +
            btoa('ck_543700d9f8c08268d75d3efefb302df4fad70a8f:cs_f1514261bbe154d662eb5053880d40518367c901'));
        headers.append("Content-Type", "application/json");
    }
     let headers = new Headers();
        this.createAuthorizationHeader(headers);

---

我想你是在寻找角度上的拦截器

拦截器的数量

import { Observable } from 'rxjs';
import {Injectable} from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http';
import { HttpErrorResponse } from "@angular/common/http";

@Injectable()
export class AngularInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).do(event => {}, err => {
        if(err instanceof HttpErrorResponse){
            console.log("Error Caught By Interceptor");
            //Observable.throw(err);
            // instead of handling error you can add headers
        }
    });
  }
}

---

关于

的更多信息，这里是如何实现的，正如上面在Rahul的示例中所给出的那样，您可以用这种方式定义拦截器。但是您需要克隆请求并添加头，请参见下面的示例，在这个示例中，我有一个获取公共头的服务，它被实例化为mser

@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {

  constructor(private mser: myService) {}

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const url: string = request.url;
    const method: string = request.method;
    request = request.clone({
      setHeaders: {
        'org-id': this.mser.feId,
        'source-id': this.mser.get().sourceId,
        'application-id': this.mser.get().applicationId,
        locale: this.mser.primaryLocale,
        uuid: uuid()
      }
    });
    return next.handle(request);
  }
}

启动应用程序并尝试点击任何服务后，您会发现拦截器中给出的代码将被执行

或者，您也可以以硬编码方式设置标题信息，在这种情况下，您必须删除下面我的代码示例中的mser，并提供硬编码值

像这样的,

request = request.clone({
          setHeaders: {
            'org-id': 'MyHardcodedValue1',
            'source-id': 'MyHardcodedValue2',
            'application-id': 'MyHardcodedValue3',
            locale: 'MyHardcodedValue4',
            uuid: 'MyHardcodedValue5',
          }
        });

---

在这里，我需要为不同组件中的不同api调用使用相同的头。如何使用拦截器实现这一点？拦截器就是这样做的。对于所有不同的api调用，这将充当一个拦截器，您可以添加到头中。我给出的示例是，对于头，您可以接受req并将头附加到itok。我是否需要在头中添加拦截器？实际上，我必须在何处声明这些公共头？您需要在拦截器中定义公共头。并克隆请求并添加标题

provider :[  { provide: HTTP_INTERCEPTORS, useClass: MyHttpInterceptor, multi: true }]

request = request.clone({
          setHeaders: {
            'org-id': 'MyHardcodedValue1',
            'source-id': 'MyHardcodedValue2',
            'application-id': 'MyHardcodedValue3',
            locale: 'MyHardcodedValue4',
            uuid: 'MyHardcodedValue5',
          }
        });