Перехватчики в Angular2

Я пытаюсь создать демонстрационное приложение на Angular2.beta.0, у которого будет механизм входа, а затем все остальные вызовы API будут иметь приобретенный токен сеанса, отправленный через заголовки.

В angular 1x я могу написать Interceptor, который добавит токен в заголовок http в отдельном коде, я хотел бы знать, имеет ли angular2 такой механизм или какой-либо другой рекомендуемый способ сделать это.

Ответ 1

Должен быть HTTP-заголовок запросов? Печенье кажется хорошим выбором: 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, это способ автоматически присоединить этот заголовок к каждому запросу.

Ответ 2

сначала в app.module.ts добавьте следующую строку в массив поставщиков:

    {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) => {
            });
        }
    }

Ответ 3

Вот пример того, как это сделать для перехвата 401 ответов от аутентифицированных API здесь.

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

В приведенном выше сообщении показано, как добавить стандартный заголовок Authorzation ко всем исходящим HTTP-запросам, а также автоматически обновлять любой токен, похожий на JWT.