Xử lý 401 trên toàn cầu với Angular

Trong dự án Angular 2 của tôi, tôi thực hiện các lệnh gọi API từ các dịch vụ trả về một Observable. Mã gọi sau đó đăng ký vào điều này có thể quan sát được. Ví dụ:

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

Giả sử máy chủ trả về 401. Làm cách nào để tôi có thể bắt lỗi này trên toàn cầu và chuyển hướng đến trang / thành phần đăng nhập?

Cảm ơn.

Đây là những gì tôi có cho đến nay:

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

Thông báo lỗi mà tôi nhận được là "backend.createConnection không phải là một hàm"

Sự miêu tả

Giải pháp tốt nhất mà tôi đã tìm thấy là ghi đè XHRBackendtrạng thái phản hồi HTTP 401và 403dẫn đến một hành động cụ thể.

Nếu bạn xử lý xác thực của mình bên ngoài ứng dụng Angular, bạn có thể buộc làm mới trang hiện tại để cơ chế bên ngoài của bạn được kích hoạt. Tôi trình bày chi tiết giải pháp này trong phần triển khai bên dưới.

Bạn cũng có thể chuyển tiếp đến một thành phần bên trong ứng dụng của mình để ứng dụng Angular của bạn không bị tải lại.

Thực hiện

Góc> 2.3.0

Cảm ơn @mrgoos, đây là giải pháp đơn giản hóa cho góc 2.3.0+ do sửa lỗi trong góc 2.3.0 (xem sự cố https://github.com/angular/angular/issues/11606 ) mở rộng trực tiếp Httpmô-đun.

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

Tệp mô-đun bây giờ chỉ chứa trình cung cấp sau.

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

Một giải pháp khác sử dụng Bộ định tuyến và dịch vụ xác thực bên ngoài được @mrgoos trình bày chi tiết trong ý kiến sau .

Angular trước 2.3.0

Việc triển khai sau đây hoạt động cho Angular 2.2.x FINALvà RxJS 5.0.0-beta.12.

Nó chuyển hướng đến trang hiện tại (cộng với một tham số để lấy URL duy nhất và tránh bộ nhớ đệm) nếu trả về mã HTTP 401 hoặc 403.

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

}

với tệp mô-đun sau.

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+

Với sự ra đời của HttpClient đã mang đến khả năng dễ dàng chặn tất cả các yêu cầu / phản hồi. Cách sử dụng chung của HttpInterceptors đã được ghi lại đầy đủ , hãy xem cách sử dụng cơ bản và cách cung cấp interceptor. Dưới đây là ví dụ về HttpInterceptor có thể xử lý lỗi 401.

Đã cập nhật cho 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
            }
        });
    }
}

Vì các API giao diện người dùng hết hạn nhanh hơn sữa, với Angular 6+ và RxJS 5.5+, bạn cần sử dụng 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);
      })
    );
  }
}

Cập nhật cho Angular 7+ và 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;
        })
      );
  }
}

Các Observablebạn nhận được từ mỗi phương thức yêu cầu là loại Observable<Response>. Đối Responsetượng, có một thuộc statustính sẽ giữ 401IF máy chủ trả về mã đó. Vì vậy, bạn có thể muốn lấy nó trước khi ánh xạ nó hoặc chuyển đổi nó.

Nếu bạn muốn tránh thực hiện chức năng này trong mỗi lần gọi, bạn có thể phải mở rộng Httplớp của Angular 2 và đưa vào triển khai của riêng bạn đối với nó gọi hàm cha ( super) cho Httpchức năng thông thường và sau đó xử lý 401lỗi trước khi trả lại đối tượng.

Xem:

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

Angular 4.3+

Để hoàn thành câu trả lời của The Gilbert Arenas Dagger :

Nếu những gì bạn cần là chặn bất kỳ lỗi nào, hãy áp dụng cách xử lý và chuyển tiếp lỗi đó xuống chuỗi (và không chỉ thêm tác dụng phụ với .do), bạn có thể sử dụng HttpClient và các bộ chặn của nó để thực hiện một số việc:

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

Để tránh sự cố tham chiếu theo chu kỳ do các dịch vụ như "Bộ định tuyến" được đưa vào một lớp dẫn xuất Http, người ta phải sử dụng phương thức Injector hậu khởi tạo. Đoạn mã sau là cách triển khai hoạt động của dịch vụ Http chuyển hướng đến tuyến Đăng nhập mỗi khi API REST trả về "Token_Expired". Lưu ý rằng nó có thể được sử dụng để thay thế cho Http thông thường và như vậy, không yêu cầu thay đổi bất kỳ điều gì trong các thành phần hoặc dịch vụ hiện có của ứng dụng của bạn.

app.module.ts

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

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

Từ Angular> = 2.3.0, bạn có thể ghi đè HTTPmô-đun và chèn các dịch vụ của mình. Trước phiên bản 2.3.0, bạn không thể sử dụng các dịch vụ được đưa vào do một lỗi chính.

Tôi đã tạo một ý chính để hiển thị cách nó được thực hiện.

Angular> 4.3: ErrorHandler cho dịch vụ cơ sở

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