RXJS/Angular Replace Observable

Question

In an angular interceptor, I want to check wether an auth-token exists. If not, it should be refreshed and the request should be resent.

return next.handle(authReq).pipe(map((result: any) => {
  if (result.body && result.body.error) {
    if (result.body.error === 'ERR_TOKEN_EXPIRED' || result.body.error === 'ERR_TOKENS_DO_NOT_MATCH') {
      console.log('Token is expired or invalid, refreshing.', result.body.error);

      return this.userService.refreshLoginToken().subscribe(success => {
        if (success) {
          return this.intercept(req, next);
        }
      });
    }
  }
  return result;
}));

The Problem is that I don't know how to replace the original Observable returned by next.handle() with a new one. The return statement before this.userService.refreshLoginToken().subscribe() returns a Subscription object. If I just pipe the result of refreshLoginToken() it wont work because refreshLoginToken sends an httprequest which is only executed when there is a subscription.

To reduce the question to a single line: How can I replace the Observable returned in line 1 by next.handle() with the one returned by this.intercept(req, next)?

Thank you!

Does this answer your question? Angular HTTP interceptor - Cannot return from inner subscription — Kurt Hamilton
– Kurt Hamilton, Commented Apr 4, 2020 at 7:46

satanTime · Accepted Answer · 2020-04-04 08:07:18Z

1

I think you should do that a bit different way.

please check the example below and the latest switchMap:

import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {StoreState} from '@core/store';
import {select, Store} from '@ngrx/store';
import {getAuthToken} from '@v2/core/store/auth/auth.reducer';
import {iif, Observable, of} from 'rxjs';
import {switchMap, take} from 'rxjs/operators';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor(protected readonly store: Store<StoreState>) {}

    public intercept(request: HttpRequest<void>, next: HttpHandler): Observable<HttpEvent<void>> {
        return this.store.pipe(
            select(getAuthToken),
            take(1),
            switchMap(token =>
                iif(
                    () => !token,
                    of(request),
                    of(
                        request.clone({
                            setHeaders: {
                                Authorization: `Bearer ${token?.accessToken}`,
                            },
                        }),
                    ),
                ),
            ),
            switchMap(clonedRequest => next.handle(clonedRequest)),
        );
    }
}

answered Apr 4, 2020 at 8:07

satanTime

13.7k1 gold badge34 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

L. Männer Over a year ago

Thank you! Are the observables created by of() automatically completed when the original http observable completes?

satanTime Over a year ago

they are completed right after they have emitted all values. but switchMap keeps listening on the main data stream until it has been completed to close the whole sequence.

Collectives™ on Stack Overflow

RXJS/Angular Replace Observable

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related