Question

我在angular4电子商务项目中工作。我需要从后端获得不同的api调用，其中包含密钥和密钥的公共标题。我已将所有api url保留在服务中，并且每当有api调用时，我都在使用该服务。每次api调用时我都会声明标题。但是我想把这些标题放在同一个服务中作为全局标题，以便我也可以使用该服务使用标题。我的问题是我无法使用服务中的标题所有api请求都是通用的。如何以角度实现这个？请帮帮我。这是我的代码： //服务...

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

Answer 2

所以这就是你如何做到的，正如上面在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);
  }
}

为了进行拦截器的设置，您需要在module.ts文件的提供者数组中提供此设置。下面给出的东西，

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

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

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

像这样，

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

如何使用角度服务的所有api请求共用标头？

2 个答案: