Angular 4.3 HttpClient (Angular访问 REST Web 服务) 三、拦截器 Interceptors

拦截器

新的HttpClient模块的新功能之一是拦截器的可用性。 拦截器处在应用程序和后端之间。
通过使用拦截器，可以在应用程序实际提交到后端之前转换来自应用程序的请求。
响应也是一样： 如果响应从后端到达，则拦截器可以在响应到达应用程序之前将其转换。
创建个栗子来看看怎么使用。
1。新建个文件githubauth.interceptor.ts并插入以下代码：

import { Injectable } from '@angular/core';import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';import { Observable } from 'rxjs/observable';@Injectable()export class GithubAuthInterceptor implements HttpInterceptor {  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {    return next.handle(req);  }}

拦截器类别 GithubAuthInterceptor 实现 HttpInterceptor ，HttpInterceptor 在@angular/common/http 库中。

//HttpInterceptor 原型export interface HttpInterceptor {    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>;}

接口HttpInterceptor 要求必须实现 intercept方法。intercept方法用来做拦截器的主要工作。intercept方法要求两个参数，第一个参数包含原始请求信息，第二个参数是请求需要传递到的下一个HTTP处理程序，以便进一步处理。

上面的GithubAuthInterceptor 类没有对原始请求做任何操作就转给了处理程序（next）。
2。对原始请求做处理

import { Injectable } from '@angular/core';import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';import { Observable } from 'rxjs/observable';@Injectable()export class GithubAuthInterceptor implements HttpInterceptor {  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {    const authReq = req.clone({      headers: req.headers.set('Authorization', 'token <your GitHub token>')    });//新增行    return next.handle(authReq);  }}

这里先用clone方法创建了个新的Request，同时在header属性总添加了个JSON对象。我们使用req.headers.set方法为Authorization属性创建一个新的header，该属性用于提交GitHub访问令牌。
最后，通过使用next.handle方法，将新创建的请求对象（header包含Authorization）传递进行进一步处理。

3。使用拦截器
为了在我们的应用中使用拦截器，需要将它提供给app.module.ts文件中的主应用程序模块AppModule：

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { HttpClientModule } from '@angular/common/http';import { HTTP_INTERCEPTORS } from '@angular/common/http';//新增行import { AppComponent } from './app.component';import { GithubAuthInterceptor } from './githubauth.interceptor';//新增行@NgModule({  declarations: [    AppComponent  ],  imports: [    BrowserModule,    HttpClientModule  ],  //新增 加入到providers中  providers: [{    provide: HTTP_INTERCEPTORS,    useClass: GithubAuthInterceptor,    multi: true  }],  bootstrap: [AppComponent]})export class AppModule { }

首先我们导入GithubAuthInterceptor，然后在第二步中，我们将一个新的对象插入到分配给@NgModule的providers属性的数组中。 该对象包含三个属性：
1. provide: 需要设置为HTTP_INTERCEPTORS，以指定HTTP拦截器被提供
2. useClass: 要设置为我们的拦截器类的类型
3. multi: 需要设置为multi来告诉Angular HTTP_INTERCEPTORS是一个值的数组，而不是一个单一的值

现在拦截器处于活动状态，授权头被添加到每个自动发送的请求中。