অ্যাঙ্গুলার দিয়ে বিশ্বজুড়ে 401 টি হ্যান্ডলিং করা

Question 1

আমার কৌণিক 2 প্রকল্পে আমি পরিষেবাগুলি থেকে পর্যবেক্ষণযোগ্য ফিরিয়ে এপিআই কল করি। কলিং কোডটি তখন এই পর্যবেক্ষণযোগ্যতে সাবস্ক্রাইব করে। উদাহরণ স্বরূপ:

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

চলুন যাক সার্ভারটি একটি 401 প্রদান করে glo

ধন্যবাদ

আমার এখন পর্যন্ত যা আছে তা এখানে:

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

আমি যে ত্রুটি বার্তাটি পাচ্ছি তা হ'ল "ব্যাকএন্ড.ক্রিয়েট কানেকশন কোনও ফাংশন নয়"

Question 2

বর্ণনা

আমি যে সর্বোত্তম সমাধানটি পেয়েছি তা হ'ল XHRBackendএইচটিটিপি প্রতিক্রিয়া স্থিতিটিকে ওভাররাইড করা 401এবং 403একটি নির্দিষ্ট ক্রিয়ায় নিয়ে যায়।

আপনি যদি আপনার কৌনিক অ্যাপ্লিকেশনটির বাইরে আপনার প্রমাণীকরণটি পরিচালনা করেন তবে আপনি বর্তমান পৃষ্ঠার একটি রিফ্রেশকে বাধ্য করতে পারেন যাতে আপনার বাহ্যিক প্রক্রিয়া ট্রিগার হয়। আমি নীচের বাস্তবায়নে এই সমাধানটি বিশদভাবে জানাচ্ছি।

আপনি নিজের অ্যাপ্লিকেশনের অভ্যন্তরে এমন কোনও উপাদানকেও ফরোয়ার্ড করতে পারেন যাতে আপনার কৌনিক অ্যাপ্লিকেশনটি পুনরায় লোড হয় না।

বাস্তবায়ন

কৌণিক> ২.৩.০

@ মিঃগ্রোগসকে ধন্যবাদ, কৌণিক ২.৩.০ এ বাগ বাগের কারণে এখানে মডিউলটি সরাসরি মডিউলটি প্রসারিত করার জন্য ( https://github.com/angular/angular/issues/11606 ইস্যু দেখুন ) এর জন্য কৌণিক 2.3.0+ এর সরল সমাধান রয়েছে solutionHttp

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 FINALএবং জন্য কাজ করে RxJS 5.0.0-beta.12।

যদি কোনও HTTP কোড 401 বা 403 ফিরে আসে তবে এটি বর্তমান পৃষ্ঠায় পুনর্নির্দেশ করে (কোনও অনন্য ইউআরএল পেতে ক্যাচিং এড়াতে একটি প্যারামিটার) plus

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+

এইচটিপিপ্লেইন্টের প্রবর্তনের সাথে সাথে সমস্ত অনুরোধ / প্রতিক্রিয়াগুলি সহজেই বাধা দেওয়ার ক্ষমতা আসল। HTTPInterceptors এর সাধারণ ব্যবহার ভালভাবে নথিভুক্ত করা হয়েছে , বেসিক ব্যবহার এবং কীভাবে ইন্টারসেপ্টার সরবরাহ করবেন তা দেখুন। নীচে একটি HTTPInterceptor এর একটি উদাহরণ যা 401 ত্রুটিগুলি পরিচালনা করতে পারে।

আরএক্সজেএস 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);
        }
      })
    );
  }

}

আরএক্সজেএস <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

অ্যাংুলার 6+ এবং আরএক্সজেএস 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);
      })
    );
  }
}

কৌণিক 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>। Responseবস্তু, একটি হয়েছে statusসম্পত্তি যা রাখা হবে 401যদি সার্ভার যা কোড দেখাচ্ছে। সুতরাং আপনি এটি ম্যাপিং বা রূপান্তর করার আগে এটি পুনরুদ্ধার করতে চাইতে পারেন।

আপনি যদি প্রতিটি কলটিতে এই কার্যকারিতাটি এড়াতে চান তবে আপনাকে অ্যাংুলার 2 এর Httpশ্রেণি প্রসারিত করতে হবে এবং এটির নিজের প্রয়োগটি ইনজেক্ট করতে হবে যা superনিয়মিত Httpকার্যকারিতার জন্য পিতামাতাকে ( ) কল করে এবং তারপরে 401অবজেক্টটি ফেরত দেওয়ার আগে ত্রুটিটি পরিচালনা করে ।

দেখা:

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

Question 6

কৌণিক 4.3+

গিলবার্ট অ্যারেনাস ড্যাজার উত্তরটি সম্পূর্ণ করতে :

আপনার যা প্রয়োজন তা যদি কোনও ত্রুটি থেকে বিরত থাকে তবে তার জন্য একটি চিকিত্সা প্রয়োগ করুন এবং এটি শৃঙ্খলে ফরোয়ার্ড করুন (এবং কেবল এর সাথে কোনও পার্শ্ব প্রতিক্রিয়া যুক্ত করবেন না .do), আপনি এই জাতীয় কিছু করার জন্য এইচটিটিপিপ্লিয়েন্ট এবং এর ইন্টারসেপ্টর ব্যবহার করতে পারেন :

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

"রাউটার" এর মতো এইচটিপিপি উত্পন্ন ক্লাসে ইঞ্জেকশন দেওয়ার মতো পরিষেবা থাকার কারণে সৃষ্ট সাইক্লিক রেফারেন্সিং ইস্যুটি এড়াতে অবশ্যই পোস্ট-কনস্ট্রাক্টর ইনজেক্টর পদ্ধতি ব্যবহার করতে হবে। নিম্নলিখিত কোডটি একটি এইচটিপি সার্ভিসের একটি কার্যকরী বাস্তবায়ন যা প্রতিবারই একটি আরএসটি এপিআই "টোকেন_এক্সপায়ারড" ফেরত লগইন রুটে পুনঃনির্দেশ করে। নোট করুন যে এটি নিয়মিত এইচটিটিপি-র প্রতিস্থাপন হিসাবে ব্যবহার করা যেতে পারে এবং এর মতো আপনার অ্যাপ্লিকেশনটির ইতিমধ্যে বিদ্যমান উপাদান বা পরিষেবায় কোনও পরিবর্তন করার প্রয়োজন নেই।

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

কৌণিক> = ২.৩.০ থেকে আপনি HTTPমডিউলটিকে ওভাররাইড করতে পারেন এবং আপনার পরিষেবাগুলি ইনজেক্ট করতে পারেন । সংস্করণ ২.৩.০ এর আগে, আপনি কোনও মূল ত্রুটির কারণে আপনার ইনজেকশন পরিষেবাগুলি ব্যবহার করতে পারেন নি।

কীভাবে এটি সম্পন্ন হয়েছে তা দেখানোর জন্য আমি একটি সূচনা তৈরি করেছি।

Question 9

কৌণিক> 4.3: বেস পরিষেবাটির জন্য ত্রুটিহ্যান্ডলার

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