2
votes

Impossible d'attraper le code d'état 401 dans Angular 7 HTTP Interceptor

J'utilise Angular 7 et j'ai utilisé HTTP Interceptor dans mon application.

Je ne suis pas en mesure de suivre le code d'état 401 dans cet intercepteur HTTP.

J'ai essayé de piquer catchError et appuyez sur mais cela donne le statut 0 , je veux 401.

Mon code est ici:

return next.handle(request).pipe(tap(event => {
            console.log('the ev is :', event);
            if (event instanceof HttpResponse) {
                this.onEnd();
            }
         }, err => {
            if (err instanceof HttpErrorResponse) {
                console.log('the eeeeeee is :', err);
                this.onEnd();
                // User logged out
                if (err.status === 401) {
                    this.router.navigate(['logout']);
                }
            }
        })).pipe(catchError(error => {
            console.log('the ee is :', error);
            return Observable.throw(error);
        }));

Merci.

javascript angular http

3 commentaires

Je ne suis pas sûr que le tap soit touché en cas d'erreur. Google pour cela.

Je suis confronté à ce problème et la raison était uniquement en mode de développement, j'obtenais le statut 0 en service, j'obtenais 401 alors que dans l'intercepteur, j'obtenais 0. lorsque je déploie l'application sur le serveur. tout fonctionnait bien et j'ai obtenu des statuts corrects sans aucun changement de code ou de configuration. je ne sais pas pourquoi mais cela ne se produisait qu'en mode développement.

@FarhatZaman, même après le déploiement de l'application sur le serveur, le même problème existe.

4 Réponses :

3
votes

J'utilise angular 6 et cela redirige vers la page de connexion lorsqu'il y a une erreur 401 ou 403. Je pense que cela devrait fonctionner en angular 7. Il devrait y avoir d'autres façons de le faire, mais je partage ce qui fonctionne pour moi dans ce Cas. J'espère que cela aide.

intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError(
        err =>
          new Observable<HttpEvent<any>>(observer => {
            if (err instanceof HttpErrorResponse) {
              const errResp = <HttpErrorResponse>err;
              if (errResp.status === UNAUTHORIZED || err.status === FORBIDDEN) {
                this.authService.goToLogin(this.router.url);
              }
            }
            observer.error(err);
            observer.complete();
          })
      )
    );

}

Peut-être que quelqu'un pourra me suggérer quelle est la meilleure façon de faire ce genre de choses.

3 commentaires

Il n'est pas nécessaire de créer un nouvel Observable dans le gestionnaire d'erreurs et d'appeler à nouveau observer.error (err) . Vous pouvez simplement renvoyer l'erreur qui continuera l'observable avec erreur à l'appelant réel. J'ai publié un exemple ci-dessous.

@dcg Obtient toujours 0 dans errResp.status .

@ArpitMeena Êtes-vous sûr de toucher le serveur?

4
votes

Vous avez un gestionnaire d'erreurs dans la méthode tap , puis un catchError canalisé séparément. À moins que vous n'ayez l'intention d'agir sur la réponse reçue, c'est-à-dire http 200. Une implémentation d'intercepteur simple serait:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

  return next.handle(request).pipe(
      catchError(err => {
        if (err instanceof HttpErrorResponse) {

          if (err.status === 401 || err.status === 403) {
              // Invalidate user session and redirect to login/home
          }

          // return the error back to the caller
          return throwError(err);
        }
      }),
      finalize(() => {
        // any cleanup or final activities
      })
    );
}

0 commentaires

1
votes

Essayez ceci

@Injectable()
export class HTTPListener implements HttpInterceptor {
constructor(private status: HTTPStatus) {
}



intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(map(event => {
        return event;
    }), catchError(err => {
        if (err.status === 401) {
        }

        const error = err.error.message || err.statusText;
        return throwError(error);
    }),
        finalize(() => {
        })
    )
}
}

0 commentaires

1
votes

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

    @Injectable()
    export class ServerErrorInterceptor implements HttpInterceptor {
    constructor(public router: Router){

    }
      intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        return next.handle(request).pipe(
          catchError((error: any) => {
            if (error.status == 401 || error.status == 0) {
                this.router.navigate(['/']);
            } else {

            }
            return of(error);
          })
        );    
      }
    }
     providers: [
        {
                provide: HTTP_INTERCEPTORS,
                useClass: ServerErrorInterceptor,
                multi: true
            }
      ],

0 commentaires