การจัดการ 401s ทั่วโลกด้วย Angular

Question 1

ในโครงการ Angular 2 ของฉันฉันทำการเรียก API จากบริการที่ส่งคืน Observable จากนั้นรหัสการโทรจะสมัครรับข้อมูลที่สังเกตได้นี้ ตัวอย่างเช่น:

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

สมมติว่าเซิร์ฟเวอร์ส่งคืน 401 ฉันจะตรวจจับข้อผิดพลาดนี้ทั่วโลกและเปลี่ยนเส้นทางไปยังหน้าล็อกอิน / ส่วนประกอบได้อย่างไร

ขอบคุณ.

นี่คือสิ่งที่ฉันมีจนถึงตอนนี้:

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

// กำหนดเองhttp.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);
    }
}

ข้อความแสดงข้อผิดพลาดที่ฉันได้รับคือ "backend.createConnection ไม่ใช่ฟังก์ชัน"

Question 2

คำอธิบาย

ทางออกที่ดีที่สุดที่ฉันพบคือการลบล้างXHRBackendสถานะการตอบสนองของ HTTP 401และ403นำไปสู่การดำเนินการบางอย่าง

หากคุณจัดการการรับรองความถูกต้องภายนอกแอปพลิเคชัน Angular ของคุณคุณสามารถบังคับให้รีเฟรชเพจปัจจุบันเพื่อให้กลไกภายนอกของคุณถูกทริกเกอร์ ฉันให้รายละเอียดโซลูชันนี้ในการใช้งานด้านล่าง

คุณยังสามารถส่งต่อไปยังส่วนประกอบภายในแอปพลิเคชันของคุณเพื่อไม่ให้แอปพลิเคชัน Angular ของคุณโหลดซ้ำได้

การนำไปใช้

เชิงมุม> 2.3.0

ขอบคุณ @mrgoos นี่คือวิธีแก้ปัญหาที่เรียบง่ายสำหรับเชิงมุม 2.3.0+ เนื่องจากการแก้ไขข้อบกพร่องในเชิงมุม 2.3.0 (ดูปัญหาhttps://github.com/angular/angular/issues/11606 ) ที่ขยายHttpโมดูลโดยตรง

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

ตอนนี้ไฟล์โมดูลมีผู้ให้บริการต่อไปนี้เท่านั้น

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

อีกวิธีหนึ่งที่ใช้เราเตอร์และบริการรับรองความถูกต้องภายนอกมีรายละเอียดอยู่ในส่วนสำคัญต่อไปนี้โดย @mrgoos

เชิงมุมก่อน 2.3.0

การดำเนินการดังต่อไปนี้การทำงานสำหรับและAngular 2.2.x FINALRxJS 5.0.0-beta.12

จะเปลี่ยนเส้นทางไปยังหน้าปัจจุบัน (บวกพารามิเตอร์เพื่อรับ URL ที่ไม่ซ้ำกันและหลีกเลี่ยงการแคช) หากส่งคืนรหัส HTTP 401 หรือ 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;
    }

}

ด้วยไฟล์โมดูลต่อไปนี้

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

Question 3

เชิงมุม 4.3+

ด้วยการแนะนำHttpClientทำให้ความสามารถในการสกัดกั้นคำขอ / การตอบกลับทั้งหมดได้อย่างง่ายดาย การใช้งานทั่วไปของ HttpInterceptors ได้รับการบันทึกไว้เป็นอย่างดีดูการใช้งานพื้นฐานและวิธีการจัดหาเครื่องสกัดกั้น ด้านล่างนี้คือตัวอย่างของ HttpInterceptor ที่สามารถจัดการข้อผิดพลาด 401

อัปเดตสำหรับ 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
            }
        });
    }
}

Question 4

เนื่องจาก API ส่วนหน้าจะหมดอายุเร็วกว่านมด้วย Angular 6+ และ RxJS 5.5+ คุณจึงต้องใช้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);
      })
    );
  }
}

อัปเดตสำหรับ Angular 7+ และ 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;
        })
      );
  }
}

Question 5

คุณได้รับจากวิธีการร้องขอแต่ละประเภทObservable วัตถุมีคุณสมบัติที่จะถือถ้าเซิร์ฟเวอร์กลับรหัสที่ ดังนั้นคุณอาจต้องการดึงข้อมูลนั้นก่อนทำการแมปหรือแปลงObservable<Response>Responsestatus401

หากคุณต้องการหลีกเลี่ยงการใช้ฟังก์ชันนี้ในแต่ละการโทรคุณอาจต้องขยายHttpคลาสของ Angular 2 และฉีดการนำไปใช้งานของคุณเองที่เรียกพาเรนต์ ( super) สำหรับHttpฟังก์ชันการทำงานปกติจากนั้นจัดการ401ข้อผิดพลาดก่อนที่จะส่งคืนอ็อบเจ็กต์

ดู:

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

Question 6

เชิงมุม 4.3+

เพื่อให้คำตอบGilbert Arenas Dagger สมบูรณ์ :

หากสิ่งที่คุณต้องการคือสกัดกั้นข้อผิดพลาดใด ๆ ให้ใช้วิธีการรักษาและส่งต่อไปตามห่วงโซ่ (ไม่ใช่แค่เพิ่มผลข้างเคียงด้วย.do) คุณสามารถใช้HttpClientและตัวสกัดกั้นเพื่อทำบางสิ่งบางอย่างได้:

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

Question 7

เพื่อหลีกเลี่ยงปัญหาการอ้างอิงแบบวนรอบที่เกิดจากการมีเซอร์วิสเช่น "เราเตอร์" ที่ถูกแทรกลงในคลาสที่ได้รับ Http เราต้องใช้วิธีการหลังการสร้างตัวสร้างหัวฉีด รหัสต่อไปนี้เป็นการใช้งานบริการ Http ที่เปลี่ยนเส้นทางไปยังเส้นทางการเข้าสู่ระบบทุกครั้งที่ REST API ส่งคืน "Token_Expired" โปรดทราบว่าสามารถใช้แทน Http ปกติได้และด้วยเหตุนี้คุณจึงไม่จำเป็นต้องเปลี่ยนแปลงส่วนประกอบหรือบริการที่มีอยู่แล้วของแอปพลิเคชันของคุณ

app.module.ts

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

ขยายข้อมูลโค้ด

ขยาย 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());
  }
}

ขยายข้อมูลโค้ด

Question 8

จาก Angular> = 2.3.0คุณสามารถแทนที่HTTPโมดูลและฉีดบริการของคุณได้ ก่อนเวอร์ชัน 2.3.0 คุณไม่สามารถใช้บริการที่ฉีดเข้าไปเนื่องจากข้อบกพร่องหลัก

ฉันได้สร้างส่วนสำคัญเพื่อแสดงวิธีการทำ

Question 9

Angular> 4.3: ErrorHandler สำหรับบริการพื้นฐาน

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