Angular2中的拦截器答案

【问题标题】：Interceptors in Angular2Angular2中的拦截器
【发布时间】：2016-03-25 04:05:53
【问题描述】：

我正在尝试在 Angular2.beta.0 上构建一个演示应用程序，该应用程序将具有登录机制，然后所有其他 API 调用将通过标头发送获取的会话令牌。

在 angular 1x 中，我可以编写一个拦截器，它会在单独的代码中将令牌添加到 http 标头中，我想知道 angular2 是否有这种机制或任何其他推荐的方法来做到这一点。

【问题讨论】：

你见过JWT for Angular2吗？

标签： angular

【解决方案1】：

必须是请求的 HTTP 标头吗？ Cookies 似乎是一个不错的选择： https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/

通过查看HTTP 文档，我们有：

get(url: string, options?: RequestOptionsArgs) : Observable<Response>

Performs a request with get http method.

转到RequestOptionsArgs 我们有：

headers : Headers

Not Yet Documented

终于登陆Headers。

import {Headers} from 'angular2/http';
var secondHeaders = new Headers({
  'X-My-Custom-Header': 'Angular'
});

所以应该是这样的：

import {Response} from "angular2/http";
import {RequestOptionsArgs} from "angular2/http";
import {Headers} from "angular2/http";

let token:string = 'my-secret';
this.http.get('your/url', <RequestOptionsArgs> {
    headers: new Headers({
        'X-My-JWT-Header': 'sweet'
    })
})

查看BaseRequestOptions 文档，这是一种以自动方式将此标头附加到每个请求的方法。

【讨论】：

BaseRequestOptions 是我一直在寻找的，现在需要让它工作。谢谢！
BaseRequestOptions 的链接无效。这是最新的工作链接 - angular.io/docs/ts/latest/api/http/index/…

【解决方案2】：

首先在 app.module.ts 中添加以下行到 providers 数组：

    {provide : Http, useFactory: (xhrBackend: XHRBackend, requestOptions:  RequestOptions) => new HttpInterceptor(xhrBackend, requestOptions),deps:  [XHRBackend, RequestOptions]}

创建 HttpIntreceptor 文件

    import {Http, RequestOptionsArgs, RequestOptions, Response, Request, ConnectionBackend} from "@angular/http";
    import {Observable} from "rxjs/Observable";
    import "rxjs/add/operator/catch"; 
    import "rxjs/add/observable/throw";
    import "rxjs/add/observable/empty";
    import {Router} from "@angular/router";

    export class HttpInterceptor extends Http {
        constructor(backend: ConnectionBackend, defaultOptions: RequestOptions,    private _router: Router) {
            super(backend, defaultOptions);
        }

        request(url: string | Request, options?: RequestOptionsArgs):      Observable<Response> {
            return this.intercept(super.request(url, options));
        }

        get(url: string, options?: RequestOptionsArgs): Observable<Response> {
            return this.intercept(super.get(url,options));
        }

        post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
            return this.intercept(super.post(url, body, options));
        }

        put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
            return this.intercept(super.put(url, body, options));
        }

        delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
            return this.intercept(super.delete(url, options));
        }

        intercept(observable: Observable<Response>): Observable<Response> {
            return observable.catch((err, source) => {
            });
        }
    }

【讨论】：

catch 会执行两次，但只有一个请求。

【解决方案3】：

这里有一个示例说明如何拦截来自经过身份验证的 API 的 401 响应。

http://www.annalytics.co.uk/angular2/javascript/typescript/ionic2/2017/02/26/Angular2-Http-Auth-Interceptor/

上面的帖子展示了如何为所有传出的 HTTP 请求添加一个标准的 Authorzation 标头，并自动刷新任何 JWT 之类的令牌。

【讨论】：