angular - 如何使用 Angular 服务使用所有 api 请求通用的 header ？

Question

我在 angular4 电子商务项目中工作。这里我需要来自后端的不同 api 调用，这些调用具有带有 key 和 key 的公共(public) header 。我将所有 api url 保存在服务中，每当有 api 调用时，我都在使用该服务.在这里，我每次调用 api 时都声明 header 。但我想将这些 header 作为全局 header 放在同一个服务中，这样我也可以使用该服务使用 header 。我的问题是我无法在服务中使用 header 所有 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);

Answer 1

我认为您正在寻找 Angular 中的拦截器。

拦截器

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

激活拦截器

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule
    ],
    providers: [
        [ { provide: HTTP_INTERCEPTORS, useClass: 
              AngularInterceptor, multi: true } ]
    ],
    bootstrap: [AppComponent]
})

更多关于 Interceptors