Weltweiter Umgang mit 401s mit Angular

In meinem Angular 2-Projekt mache ich API-Aufrufe von Diensten, die eine Observable zurückgeben. Der aufrufende Code abonniert dann dieses Observable. Beispielsweise:

getCampaigns(): Observable<Campaign[]> {
    return this.http.get('/campaigns').map(res => res.json());
}

Angenommen, der Server gibt eine 401 zurück. Wie kann ich diesen Fehler global abfangen und zu einer Anmeldeseite / Komponente umleiten?

Vielen Dank.

Folgendes habe ich bisher:

// boot.ts

import {Http, XHRBackend, RequestOptions} from 'angular2/http';
import {CustomHttp} from './customhttp';

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

// customhttp.ts

import {Http, ConnectionBackend, Request, RequestOptions, RequestOptionsArgs, Response} from 'angular2/http';
import {Observable} from 'rxjs/Observable';

@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);        
    }

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

        console.log('get...');

        return super.get(url, options);
    }
}

Die Fehlermeldung lautet "backend.createConnection ist keine Funktion".

Beschreibung

Die beste Lösung , die ich gefunden habe , ist das außer Kraft zu setzen , XHRBackendso dass der HTTP - Antwort - Status 401und 403führt zu einer bestimmten Aktion.

Wenn Sie Ihre Authentifizierung außerhalb Ihrer Angular-Anwendung durchführen, können Sie eine Aktualisierung der aktuellen Seite erzwingen, sodass Ihr externer Mechanismus ausgelöst wird. Ich beschreibe diese Lösung in der folgenden Implementierung.

Sie können auch an eine Komponente in Ihrer Anwendung weiterleiten, sodass Ihre Angular-Anwendung nicht neu geladen wird.

Implementierung

Winkel> 2.3.0

Dank @mrgoos ist hier eine vereinfachte Lösung für Angular 2.3.0+ aufgrund einer Fehlerbehebung in Angular 2.3.0 (siehe Problem https://github.com/angular/angular/issues/11606 ), die das HttpModul direkt erweitert .

import { Injectable } from '@angular/core';
import { Request, XHRBackend, RequestOptions, Response, Http, RequestOptionsArgs, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';


@Injectable()
export class AuthenticatedHttpService extends Http {

  constructor(backend: XHRBackend, defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    return super.request(url, options).catch((error: Response) => {
            if ((error.status === 401 || error.status === 403) && (window.location.href.match(/\?/g) || []).length < 2) {
                console.log('The authentication session expires or the user is not authorised. Force refresh of the current page.');
                window.location.href = window.location.href + '?' + new Date().getMilliseconds();
            }
            return Observable.throw(error);
        });
  }
}

Die Moduldatei enthält nur noch den folgenden Anbieter.

providers: [
    { provide: Http, useClass: AuthenticatedHttpService }
]

Eine weitere Lösung, die einen Router und einen externen Authentifizierungsdienst verwendet, wird in der folgenden Übersicht von @mrgoos beschrieben.

Winkel vor 2.3.0

Die folgende Implementierung funktioniert für Angular 2.2.x FINALund RxJS 5.0.0-beta.12.

Es wird zur aktuellen Seite umgeleitet (plus einem Parameter, um eine eindeutige URL zu erhalten und das Caching zu vermeiden), wenn ein HTTP-Code 401 oder 403 zurückgegeben wird.

import { Request, XHRBackend, BrowserXhr, ResponseOptions, XSRFStrategy, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

export class AuthenticationConnectionBackend extends XHRBackend {

    constructor(_browserXhr: BrowserXhr, _baseResponseOptions: ResponseOptions, _xsrfStrategy: XSRFStrategy) {
        super(_browserXhr, _baseResponseOptions, _xsrfStrategy);
    }

    createConnection(request: Request) {
        let xhrConnection = super.createConnection(request);
        xhrConnection.response = xhrConnection.response.catch((error: Response) => {
            if ((error.status === 401 || error.status === 403) && (window.location.href.match(/\?/g) || []).length < 2) {
                console.log('The authentication session expires or the user is not authorised. Force refresh of the current page.');
                window.location.href = window.location.href + '?' + new Date().getMilliseconds();
            }
            return Observable.throw(error);
        });
        return xhrConnection;
    }

}

mit der folgenden Moduldatei.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule, XHRBackend } from '@angular/http';
import { AppComponent } from './app.component';
import { AuthenticationConnectionBackend } from './authenticated-connection.backend';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [
        AppComponent,
    ],
    entryComponents: [AppComponent],
    imports: [
        BrowserModule,
        CommonModule,
        HttpModule,
    ],
    providers: [
        { provide: XHRBackend, useClass: AuthenticationConnectionBackend },
    ],
})
export class AppModule {
}

Winkel 4.3+

Mit der Einführung von HttpClient wurde die Möglichkeit geschaffen, alle Anfragen / Antworten einfach abzufangen. Die allgemeine Verwendung von HttpInterceptors ist gut dokumentiert. Informationen zur grundlegenden Verwendung und zur Bereitstellung des Interceptors finden Sie hier. Unten finden Sie ein Beispiel für einen HttpInterceptor, der 401-Fehler verarbeiten kann.

Aktualisiert für RxJS 6+

import { Observable, throwError } from 'rxjs';
import { HttpErrorResponse, HttpEvent, HttpHandler,HttpInterceptor, HttpRequest } from '@angular/common/http';

import { Injectable } from '@angular/core';
import { catchError } from 'rxjs/operators';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((err: HttpErrorResponse) => {
        if (err.status == 401) {
          // Handle 401 error
        } else {
          return throwError(err);
        }
      })
    );
  }

}

RxJS <6

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http'
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req).do(event => {}, err => {
            if (err instanceof HttpErrorResponse && err.status == 401) {
                // handle 401 errors
            }
        });
    }
}

Da Frontend-APIs mit Angular 6+ und RxJS 5.5+ schneller ablaufen als Milch, müssen Sie Folgendes verwenden pipe:

import { HttpInterceptor, HttpEvent, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { Injectable } from '@angular/core';
import { catchError } from 'rxjs/operators';
import { Router } from '@angular/router';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private router: Router) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((err: HttpErrorResponse) => {
        if (err.status === 401) {
          this.router.navigate(['login'], { queryParams: { returnUrl: req.url } });
        }
        return throwError(err);
      })
    );
  }
}

Update für Angular 7+ und rxjs 6+

import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { Injectable } from '@angular/core';
import { catchError } from 'rxjs/internal/operators';
import { Router } from '@angular/router';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private router: Router) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request)
      .pipe(
        catchError((err, caught: Observable<HttpEvent<any>>) => {
          if (err instanceof HttpErrorResponse && err.status == 401) {
            this.router.navigate(['login'], { queryParams: { returnUrl: request.url } });
            return of(err as any);
          }
          throw err;
        })
      );
  }
}

Die, die ObservableSie von jeder Anforderungsmethode erhalten, ist vom Typ Observable<Response>. Das ResponseObjekt hat eine statusEigenschaft, die das enthält401 IF enthält, wenn der Server diesen Code zurückgegeben hat. Vielleicht möchten Sie das abrufen, bevor Sie es zuordnen oder konvertieren.

Wenn Sie diese Funktionalität bei jedem Aufruf vermeiden möchten, müssen Sie möglicherweise die HttpKlasse von Angular 2 erweitern und eine eigene Implementierung einfügen, die parent ( super) für die reguläre HttpFunktionalität aufruft, und dann den 401Fehler behandeln, bevor Sie das Objekt zurückgeben.

Sehen:

https://angular.io/docs/ts/latest/api/http/index/Response-class.html

Winkel 4.3+

Um den Gilbert Arenas Dolch zu vervollständigen Antwort von :

Wenn Sie einen Fehler abfangen müssen, eine Behandlung darauf anwenden und ihn entlang der Kette weiterleiten (und nicht nur einen Nebeneffekt hinzufügen .do), können Sie HttpClient und seine Abfangjäger verwenden, um etwas in der Art zu tun:

import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // install an error handler
        return next.handle(req).catch((err: HttpErrorResponse) => {
            console.log(err);
            if (err.error instanceof Error) {
                // A client-side or network error occurred. Handle it accordingly.
                console.log('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,
                console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
            }

            return Observable.throw(new Error('Your custom error'));
        });
    }
}

Um das Problem der zyklischen Referenzierung zu vermeiden, das durch das Injizieren von Diensten wie "Router" in eine von HTTP abgeleitete Klasse verursacht wird, muss die Post-Konstruktor-Injector-Methode verwendet werden. Der folgende Code ist eine funktionierende Implementierung eines HTTP-Dienstes, der jedes Mal, wenn eine REST-API "Token_Expired" zurückgibt, zur Anmelderoute umleitet. Beachten Sie, dass es als Ersatz für das reguläre HTTP verwendet werden kann und daher keine Änderungen an den bereits vorhandenen Komponenten oder Diensten Ihrer Anwendung erforderlich macht.

app.module.ts

  providers: [  
    {provide: Http, useClass: ExtendedHttpService },
    AuthService,
    PartService,
    AuthGuard
  ],

erweitert-http.service.ts

import { Injectable, Injector } from '@angular/core';
import { Request, XHRBackend, RequestOptions, Response, Http, RequestOptionsArgs, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';
import { AuthService } from './auth.service';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class ExtendedHttpService extends Http {
    private router; 
    private authService;

  constructor(  backend: XHRBackend, defaultOptions: RequestOptions, private injector: Injector) {
    super(backend, defaultOptions);
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
 
    if (typeof url === 'string') {
      if (!options) {
        options = { headers: new Headers() };
      }
      this.setHeaders(options);
    } else {
      this.setHeaders(url);
    }
    console.log("url: " + JSON.stringify(url) +", Options:" + options);

    return super.request(url, options).catch(this.catchErrors());
  }

  private catchErrors() {

    return (res: Response) => {
        if (this.router == null) {
            this.router = this.injector.get(Router);
        }
        if (res.status === 401 || res.status === 403) {
            //handle authorization errors
            //in this example I am navigating to login.
            console.log("Error_Token_Expired: redirecting to login.");
            this.router.navigate(['signin']);
        }
        return Observable.throw(res);
    };
  }

  private setHeaders(objectToSetHeadersTo: Request | RequestOptionsArgs) {
      
      if (this.authService == null) {
            this.authService = this.injector.get(AuthService);
      }
    //add whatever header that you need to every request
    //in this example I could set the header token by using authService that I've created
     //objectToSetHeadersTo.headers.set('token', this.authService.getToken());
  }
}

Ab Angular> = 2.3.0 können Sie das HTTPModul überschreiben und Ihre Dienste einspeisen. Vor Version 2.3.0 konnten Sie Ihre injizierten Dienste aufgrund eines Kernfehlers nicht verwenden.

Ich habe einen Kern erstellt, um zu zeigen, wie es gemacht wird.

Winkel> 4.3: ErrorHandler für den Basisdienst

protected handleError(err: HttpErrorResponse | any) {
    console.log('Error global service');
    console.log(err);
    let errorMessage: string = '';

    if (err.hasOwnProperty('status')) { // if error has status
        if (environment.httpErrors.hasOwnProperty(err.status)) {
            // predefined errors
            errorMessage = environment.httpErrors[err.status].msg; 
        } else {
            errorMessage = `Error status: ${err.status}`;
            if (err.hasOwnProperty('message')) {
                errorMessage += err.message;
            }
        }
     }

    if (errorMessage === '') {
        if (err.hasOwnProperty('error') && err.error.hasOwnProperty('message')) { 
            // if error has status
            errorMessage = `Error: ${err.error.message}`;
        }
     }

    // no errors, then is connection error
    if (errorMessage === '') errorMessage = environment.httpErrors[0].msg; 

    // this.snackBar.open(errorMessage, 'Close', { duration: 5000 }});
    console.error(errorMessage);
    return Observable.throw(errorMessage);
}