2016-04-21 11 views
0

Ich brauche in meiner angular 2 App einen HTTP-Interceptor, der den HTTP-Statuscode jeder Antwort prüft. Wenn der Statuscode 401 lautet, möchte ich den Benutzer zur Anmeldeseite umleiten.HTTP Interceptor in Angular 2

Gibt es eine einfache Möglichkeit, dies zu implementieren?

Danke !!

Antwort

1

Sie könnten eine Klasse implementieren, die die Http ein erweitert:

@Injectable() 
export class CustomHttp extends Http { 
    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) { 
    super(backend, defaultOptions); 
    } 

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { 
    console.log('request...'); 
    return super.request(url, options).catch(res => { 
     // do something 
    });   
    } 

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

    (...) 
} 

und registrieren sie, wie unten beschrieben:

bootstrap(AppComponent, [HTTP_PROVIDERS, 
    new Provider(Http, { 
     useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new CustomHttp(backend, defaultOptions), 
     deps: [XHRBackend, RequestOptions] 
    }) 
]); 

Wenn 401 Fehler wie dieser Ebene auftreten, könnte man sie global abfangen in der Fang-Callback. Sie können injizierte Elemente verwenden, um sie zu handhaben. Zum Beispiel die Router.

+0

Whith diesem Ansatz erhalte ich immer folgende Fehlermeldung: Fang ist keine Funktion ich dies zeigen schon: https://github.com/lexon0011/IssueDemonstrator Könnte jemand den Fehler reproduzieren? –

+0

Siehe diese Frage: http://stackoverflow.com/questions/34515173/angular-2-http-get-with-typescript-error-http-get-map-is-not-a-function-in/34515276#34515276 Sie müssen den Catch-Operator wie für die Karte importieren (ersetzen Sie Karte für Fang in der Antwort ;-)) –