Angular 4.3拦截器 – 如何使用？

Angular允许您创建httpInterceptor：

import {InjectablE} from '@angular/core';
import {httpEvent,httpInterceptor,httpHandler,httprequest} from '@angular/common/http';

@Injectable()
export class NoopInterceptor implements httpInterceptor {
  intercept(req: httprequest<any>,next: httpHandler): Observable<httpEvent<any>> {
    return next.handle(req);
  }
}

您可以将其集成到您的应用中,如下所示：

import {NgModulE} from '@angular/core';
import {http_INTERCEPTORS} from '@angular/common/http';

@NgModule({
  providers: [{
    provide: http_INTERCEPTORS,useClass: NoopInterceptor,multi: true,}],})
export class AppModule {}

要添加授权标头,您可以使用更改的标头克隆请求：

import {InjectablE} from '@angular/core';
import {httpEvent,httprequest} from '@angular/common/http';

@Injectable()
export class AuthInterceptor implements httpInterceptor {
  constructor(private auth: AuthservicE) {}

  intercept(req: httprequest<any>,next: httpHandler): Observable<httpEvent<any>> {
    // Get the auth header from the service.
    const authHeader = this.auth.getAuthorizationHeader();
    // Clone the request to add the new header.
    const authReq = req.clone({headers: req.headers.set('Authorization',authHeader)});
    // Pass on the cloned request instead of the original request.
    return next.handle(authReq);
  }
}

请注意,拦截器的作用类似于链,因此您可以设置多个拦截器来执行不同的任务.