无法在Angular 7 HTTP拦截器中捕获401状态代码

Question

I am using Angular 7 and I have used HTTP Interceptor in my application.

I am not able to track 401 status code in that HTTP Interceptor.

I tried pitting catchError and tap but it gives status 0 , I want 401.

My code is here:

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

Thanks.

Answer 1

I'm using angular 6 and this redirects to the login page when there's an error 401 or 403. I think it should work in angular 7. There should be other ways to do it but I share what works for me in this case. Hope it helps.

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

}

Maybe someone can suggest me what's the better way to carry out this kind of stuff.

Answer 2

You have an error handler in the tap method and then a separately piped catchError . Unless you intend to act on the received response ie http 200. A simple interceptor implementation would be:

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

Answer 3

Try this

@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(() => {
        })
    )
}
}

Answer 4

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
            }
      ],