Zu behandeln, wie unberechtigte Anfragen(status 401 oder 403) mit neuen httpClient in eckigen 4.3

Ich habe eine auth-interceptor.service.ts zur Bearbeitung der Anfragen

import {Injectable} from '@angular/core';
import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {Cookie} from './cookie.service';
import {Router} from '@angular/router';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor(private router: Router) {}
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        //Clone the request to add the new header.
        const authReq = req.clone({headers: req.headers.set(Cookie.tokenKey, Cookie.getToken())});
        //Pass on the cloned request instead of the original request.
        return next.handle(authReq).catch(this.handleError);
    }

    private handleError(err: HttpErrorResponse): Observable<any> {
        console.log(err);
        if (err.status === 401 || err.status === 403) {
            Cookie.deleteUser();
            this.router.navigateByUrl(`/login`);
            return Observable.of(err.message);
        }
        //handle your auth error or rethrow
        return Observable.throw(err);
    }
}

Aber ich bekomme die folgende Fehlermeldung. Nichts wirklich passiert, wie es nicht den cookie löschen oder es funktioniert nicht, navigieren Sie zu login-Seite
Jede Hilfe oder Anregungen wäre willkommen.

HttpClient unterstützt Abfangjäger. Sie verwenden sollten, um Fehler zu behandeln transparent, stattdessen zwingen Sie alle Ihre code zu verwenden, ApiService statt HttpClient direkt.
Ich habe auch ein auth-interceptor. Ich habe aktualisiert die post. Ist, dass der Ort, um solche Wünsche? Alle Beispiel-code??
wenn Sie gehen mit Ihrer Methode, Sie gehen zu müssen, wickeln Sie den gesamten http-Dienst. Ich würde empfehlen, entweder mit einem interceptor oder einer Erweiterung der http-Dienst und überschreiben die request-Methode nur.
Ich habe auch ein interceptor add header auf jede Anfrage. Ich bin nicht sicher, wie Sie Sie zu behandeln die Antwort von jeder Anfrage in den interceptor. Ich habe aktualisiert die post
Hinzugefügt ein Beispiel in einer Antwort

InformationsquelleAutor Sai Ram Gupta | 2017-09-02

Sollten Sie Ihre Abfangjäger und nur behandeln es wie folgt:

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor(private router: Router) { }

    private handleAuthError(err: HttpErrorResponse): Observable<any> {
        //handle your auth error or rethrow
        if (err.status === 401 || err.status === 403) {
            //navigate /delete cookies or whatever
            this.router.navigateByUrl(`/login`);
            //if you've caught /handled the error, you don't want to rethrow it unless you also want downstream consumers to have to handle it as well.
            return Observable.of(err.message);
        }
        return Observable.throw(err);
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    //Clone the request to add the new header.
        const authReq = req.clone({headers: req.headers.set(Cookie.tokenKey, Cookie.getToken())});
        //catch the error, make specific functions for catching specific errors and you can chain through them with more catch operators
        return next.handle(authReq).catch(x=> this.handleAuthError(x)); //here use an arrow function, otherwise you may get "Cannot read property 'navigate' of undefined" on angular 4.4.2/net core 2/webpack 2.70
    }
}

keine Notwendigkeit für den http-Dienst-wrapper.

um den router zu verwenden, benötigen Sie eine Fabrik-Anbieter wie:

 providers: [
     {
         provide: HTTP_INTERCEPTORS,
         useFactory: function(router: Router) {
           return new AuthInterceptor(router);
         },
         multi: true,
         deps: [Router]
      },
      .... other providers ...
  ]

wo immer Sie sind, bietet das interceptor (wahrscheinlich app.Modul). verwenden Sie nicht einen Pfeil-Funktion. Sie werden nicht unterstützt in der Fabrik-Funktionen, wenn Sie versuchen, zu bauen, für prod.

Arbeiten plunk: https://plnkr.co/edit/UxOEqhEHX1tCDVPDy488?p=preview

Ich wirklich zu schätzen Ihre Antwort und Hinzugefügt mein code. Ich habe einige seltsame Fehler. Ich bin nicht sicher, warum ist this.router undefiniert. Ich habe aktualisiert die post mit der Antwort. Wir danken Ihr für die Hilfe.
benötigen Sie eine factory-Funktion, um eine httpinterceptor und injec den router... siehe das github gist.github.com/mrgoos/45ab013c2c044691b82d250a7df71e4c
aktualisiert meine Antwort.
Ich glaube, es ist die Verwendung des Routers in einem interceptor, http Abfangjäger sind registriert, bevor der router kann es also nicht injiziert werden, ohne dass es aufgrund der Winkel ist hierarchichal Injektoren
Ja stimmt, ich habe gerade den gleichen Fehler. Sieht, wie ich eine factory-Funktion wie in der gist link, den Sie zur Verfügung gestellt.

InformationsquelleAutor bryan60

Vom @bryan60 Vorschlag, den ich machte einige änderungen, um seine Lösung

In der app.- Modul.ts:

providers: [
     {
        provide: HTTP_INTERCEPTORS,
        useFactory: function(injector: Injector) {
            return new AuthInterceptor(injector);
        },
        multi: true,
        deps: [Injector]
    },
      .... other providers ...
]

und in auth-interceptor.service.ts:

import {Injectable, Injector} from '@angular/core';
import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {Cookie} from './cookie.service';
import {Router} from '@angular/router';
import {UserService} from './user.service';
import {ToasterService} from '../toaster/toaster.service';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor(private injector: Injector) {}

    private handleError(err: HttpErrorResponse): Observable<any> {
        let errorMsg;
        if (err.error instanceof Error) {
            //A client-side or network error occurred. Handle it accordingly.
            errorMsg = `An error occurred: ${err.error.message}`;
        } else {
            //The backend returned an unsuccessful response code.
            //The response body may contain clues as to what went wrong,
            errorMsg = `Backend returned code ${err.status}, body was: ${err.error}`;
        }
        if (err.status === 404 || err.status === 403) {
            this.injector.get(UserService).purgeAuth();
            this.injector.get(ToasterService).showError(`Unauthorized`, errorMsg);
            this.injector.get(Router).navigateByUrl(`/login`);
        }
        console.error(errorMsg);
        return Observable.throw(errorMsg);
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        //Clone the request to add the new header.
        const authReq = req.clone({headers: req.headers.set(Cookie.tokenKey, Cookie.getToken())});
        //Pass on the cloned request instead of the original request.
        return next.handle(authReq).catch(err => this.handleError(err));
    }
}

Wenn Sie mit AOT in der Gebäude-versuchen:

export function authInterceptorFactory(injector: Injector) {
    return new AuthInterceptor(injector);
}

providers: [
         {
            provide: HTTP_INTERCEPTORS,
            useFactory: authInterceptorFactory,
            multi: true,
            deps: [Injector]
        },
          .... other providers ...
]

Warum benutzen Sie den Injektor statt Injektion explizit? Ihr service hat nun 3 etwas versteckte Abhängigkeiten. Es ist nicht eine große Sache, wenn Sie es nur tun, in einem Ort, aber wenn Sie machen es sich zur Gewohnheit, Ihr Projekt könnte schwierig werden zu ändern und zu pflegen.
Ja danke für die info. Dies ist der einzige Ort, den ich mache, wie diese und diese werden direkt importiert, um app-Modul. Ich habe sicher kein anderes Modul importiert diese Abfangjäger.

InformationsquelleAutor Sai Ram Gupta

den oben @bryan60 Antwort ist funktioniert gut , wenn eine gerichtete Frage wie ich mit catch den Fehler im unten line

return next.handle(authReq).catch(x=> this.handleAuthError(x));

do() den Fehler behandeln(wenn Sie Gesicht Problem mit catch())

importieren in Datei:

import 'rxjs/add/operator/do';

handle Fehler:

return next.handle(authReq)
 .do(
    success => {/*todo*/},
    err => {this.handleAuthError(authReq)}
    );
}

handleAuthError(err: any) {
    if(err.status === 401 || err.status === 403) {
    this.storageService.clear();
    window.location.href = '/home';
    }
}

Ich hoffe, dass dies jemand helfen.

InformationsquelleAutor yala ramesh

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.