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, next: HttpHandler): Observable> {
    return next.handle(req);
  }
}

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

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

接口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, next: HttpHandler): Observable> {
    const authReq = req.clone({
      headers: req.headers.set('Authorization', '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是一个值的数组，而不是一个单一的值

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