Not able to catch 401 status code in Angular 7 HTTP Interceptor

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

You have an error handler in the tap method and then a separately piped catchError. Unless you intend to act on the received response i.e 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 2

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 3

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

Answer 4

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