0

このチュートリアルに従って、1 つの http インターセプターを作成しました。
https://www.illucit.com/blog/2016/03/angular2-http-authentication-interceptor/

以下は私のコードです：

import {Injectable} from '@angular/core';
import {Http, Request, RequestOptionsArgs, Response, RequestOptions, ConnectionBackend} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/Rx';
import {EventEmitterService} from '../service/event.emitter';


export class CustomHttp extends Http {
    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private _eventEmitterService: EventEmitterService) {
        super(backend, defaultOptions);
        alert(this._eventEmitterService); //Undefined
        alert(_eventEmitterService); //gives object
    }

    request(url: string | Request, options?: RequestOptionsArgs): 
      Observable<Response> {
        /* CUSTOM CODE GOES HERE SEE EXAMPLE BELOW*/
        return this.intercept(super.request(url , options));
    }

    get(url: string, options?: RequestOptionsArgs): Observable<Response> { 
        console.log('get...');
        return this.intercept(super.get(url, options));
       // super.get(url, options).catch(res=>{alert(res);return Observable.throw(res)})
    }

    intercept(observable: Observable<Response>): Observable<Response> {
         return observable.catch((err, source) => {
            if (err.status  == 401) {
                this._eventEmitterService.get('authenticationFailed').emit('true'); //this._eventEmitterService is undefined
            } 
            return Observable.throw(err);

        });
    }
}

以下は、それをブートストラップするコードです。

bootstrap(AppComponent, [ disableDeprecatedForms(),provideForms(), EventEmitterService, 
    provide(Http, {
        useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, eventEmitterService: EventEmitterService) 
           => new CustomHttp(backend, defaultOptions, eventEmitterService),
        deps: [XHRBackend, RequestOptions, EventEmitterService]
    })
]);

CustomHttp のコンストラクターが表示されている場合は、EventEmitterService のオブジェクトを挿入しています。しかし、このオブジェクトはクラスの「この」オブジェクトに割り当てられていません。そのため、「インターセプター」メソッドでは使用できません。
私は何をしているのですか？

4

1 に答える 1

0

この問題の根本原因がわかりました。他の人を助けることができるように、ここに投稿します。
上記の投稿コードに間違いはありません。
{ path: '', pathMatch: 'prefix',redirectTo: 'test'} をルーティングに追加しました。このデフォルトのルーティング オプションを削除すると、機能し始めました。SO問題はリダイレクトにあると思います。リダイレクトすると、この問題が発生します。
ありがとう

于 2016-07-15T06:47:46.510 に答える