Angular 4.3拦截器-如何使用？

我正在构建一个需要授权 header 的新应用。通常，我使用与scotch.io article中发现的方法非常相似的方法。但是引起我注意的是，现在通过新的HttpClientModule在Angular 4生态系统中完全支持HTTP拦截器，我正在尝试找到一些有关如何正确使用它们的文档。

如果我不正确(从4.3版本开始)，这是注入(inject)授权 header 的最佳做法，那么我也乐于接受建议。我的想法是，这是最近添加的功能，这意味着可能有充分的理由迁移到“Angular 批准”方法。

最佳答案

这个答案是从CodeWarrior链接到的official documentation借来的。

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 {}

要添加授权 header ，您可以使用更改后的 header 克隆请求:

import {Injectable} from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpHandler, 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);
  }
}

请注意，拦截器的作用就像一条链，因此您可以设置多个拦截器来执行不同的任务。

关于Angular 4.3拦截器-如何使用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45355763/