CODEWITHSUNDEEP
angularangular-http-interceptorsangular4-httpclient
user2870934
user2870934

Reputation: 709

Angular4 Interceptor change response

I have an auth HttpInterceptor:

import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, 
HttpRequest} from '@angular/common/http';
import {AuthService} from '../service/auth.service';
import {Observable} from 'rxjs/Observable';
import {Injectable} from '@angular/core';
import {Router} from '@angular/router';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService,
              private router: Router) {
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authHeader = this.authService.getToken();
    const clone = req.clone({headers: req.headers.set('Authorization',authHeader)});
    return next.handle(clone).do(() => {
}, err => {
  console.log(err);
  if (err instanceof HttpErrorResponse && err.status === 401) {
    this.authService.clearToken();
    this.router.navigate(['/auth/signin']);
    return Observable.empty();
      }
    });
  }
}

This interceptor works fine, but when i'm getting 401 i'm redirecting user to login page, but the error still goes to the service, and in that service i'm showing error msg, and this msg showing at signin page. So i want to change response or do something in if (err instanceof HttpErrorResponse && err.status === 401) { block, to not returning error in this case.

return Observable.empty();

is not working

Upvotes: 5

Views: 3298

Answers (1)

Alexander Leonov
Alexander Leonov

Reputation: 4794

next.handle(clone).do() - this is what's causing such behavior. do() operator is intended only to provide side-effects, but it does not actually affect data flow and error handling in the observable pipe. Essentially it is saying "when this happens please do this and that and then continue as if there's no do() section at all". If you want to suppress errors then you need to use catch() operator.

Code would be almost the same:

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor(private authService: AuthService,
                private router: Router) {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const authHeader = this.authService.getToken();
        const clone = req.clone({headers: req.headers.set('Authorization',authHeader)});
        return next.handle(clone).catch(err => { // <-- here
            console.log(err);
            if (err instanceof HttpErrorResponse && err.status === 401) {
                this.authService.clearToken();
                this.router.navigate(['/auth/signin']);
                return Observable.empty();
            }
            // we must tell Rx what to do in this case too
            return Observable.throw(err);
        });
    }
}

Upvotes: 8

Related Questions