Angular HTTP Interceptor how to chain an observable

Question

I am using the Azure AD adal library to do authentication. There is a call to aquire a token that returns an observable. How can this observable be added into the intercept? In the below example, how can I get the request that is set inside the subscribe to be returned as the Observable?

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.authAzureService.getAccessToken()
    .subscribe(token => {
      // I need this to be returned
      request = this.getRequestWithHeaders(request, token);
    });

    // This returns the request before the access token is added
    return next.handle(request);
  }

score 4 · Answer 1 · answered Mar 22 '18 at 20:40

Thanks to @Commecial Suicide I found the solution, which is to use a flatMap. Here is the code that worked:

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let requestHandler = this.authAzureService.getAccessToken()
    .flatMap(token => {
      request = this.getRequestWithHeaders(request, token);
      return next.handle(request);
    });
    return requestHandler;
  }

score 1 · Answer 2 · answered Mar 22 '18 at 19:55

1

When you need to return something from Observable, you can use map instead of subscribe:

return this.authAzureService.getAccessToken()
  .map(token => request = this.getRequestWithHeaders(request, token));
}

answered Mar 22 '18 at 19:55

P.S.

15,970
14
62
86

I think this is close, but it's not quite right. When I do this, the "Get" never goes out across the wire. – Michael Witt Mar 22 '18 at 20:15
Using a flatMap provided the solution. I'll post my code. – Michael Witt Mar 22 '18 at 20:38

score -1 · Answer 3 · answered Mar 22 '18 at 19:55

-1

request = request.clone({
  setHeaders: {
    Authorization: `Bearer ${token}`
  }
});
return next.handle(request);

answered Mar 22 '18 at 19:55

erni

176
1
1
10

Angular HTTP Interceptor how to chain an observable

3 Answers3

Linked