CODEWITHSUNDEEP
angularrxjsobservableinterceptorangular8
pengz
pengz

Reputation: 2471

Angular 8 subscribe to an observable in an interceptor

I am trying to write an HTTP interceptor to add an 'access level' parameter to the request. I am trying to get the value from an observable currentAccessLevel$. However, the observable is not returned correctly and the interceptor breaks the entire request cycle.

This question already has an answer here and here, however, the accepted answers do not seem to be working in Angular 8. I am not sure if I'm doing something wrong or if there was some sort of change made to interceptors in Angular 8.

I also tried using switchMap, flatMap, and mergeMap.

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { AuthService } from 'src/app/services/auth/auth.service';

@Injectable()
export class AccessLevelInterceptor implements HttpInterceptor {
  private accessLevel: string;

  constructor(private authService: AuthService) { }

  // Intercept HTTP Requests
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // Get current value of access level observable from authentication service
    return this.authService.currentAccessLevel$
      .mergeMap(res => next.handle(request));

  }

}

The currentAccessLevel$ is a string value created in a service as a BehaviorSubject and then converted to an Observable. That way the current value of the string can be shared across multiple components.

// Create a BehaviorSubject to track and share updates to currentAccessLevel value
  private currentAccessLevel: string;
  currentAccessLevelSubject: BehaviorSubject<string> = new BehaviorSubject(this.currentAccessLevel);
  currentAccessLevel$ = this.currentAccessLevelSubject.asObservable();

Upvotes: 5

Views: 2542

Answers (1)

Federico Galfione
Federico Galfione

Reputation: 1109

Yes, this is not working anymore since Rxjs 5.5. You need to use pipe method to concatenate operators:

return this.authService.currentAccessLevel$
      .pipe(mergeMap(res => next.handle(request)));

Take a look here to learn more about piping.

Upvotes: 3

Related Questions