Menangani 401 secara global dengan Angular

Dalam proyek Angular 2 saya, saya membuat panggilan API dari layanan yang mengembalikan Observable. Kode panggilan kemudian berlangganan observable ini. Sebagai contoh:

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

Katakanlah server mengembalikan 401. Bagaimana saya bisa menangkap kesalahan ini secara global dan mengarahkan ke halaman / komponen login?

Terima kasih.

Inilah yang saya miliki sejauh ini:

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

Pesan kesalahan yang saya dapatkan adalah "backend.createConnection bukan fungsi"

Deskripsi

Solusi terbaik yang saya temukan adalah menimpa XHRBackendstatus respons HTTP 401dan 403mengarah ke tindakan tertentu.

Jika Anda menangani otentikasi Anda di luar aplikasi Angular Anda, Anda dapat memaksa menyegarkan halaman saat ini sehingga mekanisme eksternal Anda dipicu. Saya merinci solusi ini dalam implementasi di bawah ini.

Anda juga bisa meneruskan ke komponen di dalam aplikasi Anda sehingga aplikasi Angular Anda tidak dimuat ulang.

Penerapan

Sudut> 2.3.0

Berkat @mrgoos, berikut adalah solusi yang disederhanakan untuk angular 2.3.0+ karena perbaikan bug di angular 2.3.0 (lihat masalah https://github.com/angular/angular/issues/11606 ) memperluas Httpmodul secara langsung .

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

File modul sekarang hanya berisi penyedia berikut.

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

Solusi lain yang menggunakan Router dan layanan otentikasi eksternal dirinci dalam inti berikut oleh @mrgoos.

Angular sebelum 2.3.0

Implementasi berikut bekerja untuk Angular 2.2.x FINALdan RxJS 5.0.0-beta.12.

Ini mengalihkan ke halaman saat ini (ditambah parameter untuk mendapatkan URL unik dan menghindari caching) jika kode HTTP 401 atau 403 dikembalikan.

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

}

dengan file modul berikut.

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 {
}

Angular 4.3+

Dengan diperkenalkannya HttpClient muncul kemampuan untuk dengan mudah mencegat semua permintaan / tanggapan. Penggunaan umum HttpInterceptors didokumentasikan dengan baik , lihat penggunaan dasar dan cara menyediakan interseptor. Di bawah ini adalah contoh HttpInterceptor yang dapat menangani kesalahan 401.

Diperbarui untuk 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
            }
        });
    }
}

Karena API frontend kedaluwarsa lebih cepat daripada susu, dengan Angular 6+ dan RxJS 5.5+, Anda perlu menggunakan 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);
      })
    );
  }
}

Pembaruan untuk Angular 7+ dan 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;
        })
      );
  }
}

Yang ObservableAnda dapatkan dari setiap metode permintaan adalah tipe Observable<Response>. The Responseobjek, memiliki statusproperti yang akan memegang 401JIKA server kembali kode tersebut. Jadi, Anda mungkin ingin mengambilnya sebelum memetakan atau mengonversinya.

Jika Anda ingin menghindari melakukan fungsionalitas ini pada setiap panggilan, Anda mungkin harus memperluas Httpkelas Angular 2 dan memasukkan implementasi Anda sendiri yang memanggil induk ( super) untuk Httpfungsionalitas reguler dan kemudian menangani 401kesalahan sebelum mengembalikan objek.

Lihat:

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

Angular 4.3+

Untuk melengkapi jawaban The Gilbert Arenas Dagger :

Jika yang Anda butuhkan adalah mencegat kesalahan apa pun, terapkan perawatan untuk itu dan teruskan ke bawah rantai (dan tidak hanya menambahkan efek samping dengan .do), Anda dapat menggunakan HttpClient dan interseptornya untuk melakukan hal semacam itu:

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

Untuk menghindari masalah referensi siklik yang disebabkan oleh layanan seperti "Router" yang dimasukkan ke dalam kelas turunan Http, seseorang harus menggunakan metode Injector pasca-konstruktor. Kode berikut adalah implementasi yang berfungsi dari layanan Http yang mengarahkan ke rute Login setiap kali REST API mengembalikan "Token_Expired". Perhatikan bahwa ini bisa digunakan sebagai pengganti Http biasa dan dengan demikian, tidak perlu mengubah apa pun dalam komponen atau layanan aplikasi Anda yang sudah ada.

app.module.ts

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

extended-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());
  }
}

Dari Angular> = 2.3.0 Anda dapat mengganti HTTPmodul dan memasukkan layanan Anda. Sebelum versi 2.3.0, Anda tidak dapat menggunakan layanan yang diinjeksi karena bug inti.

Saya telah membuat inti untuk menunjukkan bagaimana hal itu dilakukan.

Angular> 4.3: ErrorHandler untuk layanan dasar

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