Handling refresh tokens using rxjs

From a quick look at your code I would say that your problem seems to be that you are not flattening the Observable that is returned from the refresh service.

The catch operator expects that you will return an Observable that it will concatenate onto the end of the failed Observable so that the down stream Observer doesn't know the difference.

In the non-401 case you are doing this correctly by returning an Observable that rethrows the initial error. However in the refresh case you are returning an Observable the produces more Observables instead of single values.

I would suggest you change the refresh logic to be:

    return me.authService
             .refreshAuthenticationObservable()
             //Use flatMap instead of map
             .flatMap((authenticationResult:AuthenticationResult) => {
                   if (authenticationResult.IsAuthenticated == true) {
                     // retry with new token
                     me.authService.setAuthorizationHeader(request.headers);
                     return this.http.request(url, request);
                   }
                   return Observable.throw(initialError);
    });

flatMap will convert the intermediate Observables into a single stream.

In the latest release of RxJs, the flatMap operator has been renamed to mergeMap.