使用拦截器在角度6中对授权请求进行错误处理

Question

I am appending authorization header using interceptor. Now in interceptor I am also checking only for http error related to 401 ie bad credentials which means the case when valid access token doensnot exist in the sever to access the resource. So if I get 401 error I am logging user out and redirecting to login page. Now for any other server related error I am catching in error block of service call inside component, and displaying appropriate message on UI. But it seems there is some problem when I logout the user via interceptor. The logout and redirect works fine but the screen goes unresponsive they way it becomes in case of javascript alert message.

component.ts :

 this.Servicefunction(arg).subscribe((Response: any) => {
        //somthing/
        }, (err: any) => {
            alert("Server error occured");
        });

Service.ts

Servicefunction(arg): Observable<any> {
    let body = { "arg": arg }
    return this.httpClient.post("http://xx.xx.xx:xx/CheckExistenceOfRecord', body);
}

interceptor.ts:

import { Injectable } from "@angular/core";
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpHeaders, HttpParams, HttpResponse, HttpErrorResponse } from "@angular/common/http";
import { Observable } from 'node_modules/rxjs';
import { CookieService } from 'ngx-cookie-service';
import { ActivatedRoute, Router } from '@angular/router';
import { AppComponent } from './app.component';
import { AuthService } from './route-auth';
import { map, catchError, filter, switchMap } from 'rxjs/operators'

@Injectable()
export class Interceptor implements HttpInterceptor {
  constructor(private cookieService: CookieService, private route: Router, private appComp: AppComponent,  private authService: AuthService) { }
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token: string = this.cookieService.get('authToken');
        const headers = new HttpHeaders().append('Authorization', token).append('Content-Type', 'application/json');
        const AuthRequest = request.clone({ headers: headers });
        return next.handle(AuthRequest).pipe(catchError((err: any, caught) => {
          if (err instanceof HttpErrorResponse) {
            if (err.status === 401) {
              console.info('err.error =', err.error, ';');
              this.authService.logout();
              this.route.navigateByUrl('');
              this.cookieService.deleteAll('/');
            }
            return Observable.throw(err);
          }
        }));
      }
  }

Answer 1

you can try like this. here we are using a interceptor

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError(error => this.handleError(error))
    );
  }

  private handleError(error: HttpErrorResponse): Observable<any> {
     if (error.status === 401) {
      // Do your thing here      
   }         
  }