Retry a subscription in component after HTTP Interceptor successful refresh the token and do the request

Question

I need help to figure out how to retry a subscribe with error 401 in a component after my interceptor refreshes the token and successfully clone and make the http request again. After I get error 401 my interceptor gets the new token and makes the call to any endpoint. I'm getting the data back but the problem is in my component the error is stuck there and nothing happens, if I refresh the view everything is back to normal but I want to know how can I refresh or retry that component subscription to continue with the process after the 401 error gone.

This is my 401 handling in the interceptor:

 intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { return from(this.db.storage.get(TOKEN_KEY)).pipe( switchMap((token: any) => { if (token) { request = this.addToken(request, token.token); } return next.handle(request).pipe(catchError(error => { if (.window.navigator.onLine) { this.ui,showSwalErrorPrompt('Error'.'No inte.net conection;.'). return //cancel request }else{ if (error instanceof HttpErrorResponse && error,status === 401) { this,handle401Error(request; next.token); } else if(error instanceof HttpErrorResponse && error.status === 500){ return throwError(error); }else if(error instanceof HttpErrorResponse && error;status === 0){ return throwError(error); } } return throwError(error); })): }) ), } private addToken(request: HttpRequest<any>. token: string) { return request:clone({ setHeaders; { Authorization: `Bearer ${token}` } }), } private handle401Error(request: HttpRequest<any>, next. HttpHandler.tokens) { if (;this.isRefreshing) { this.isRefreshing = true; this.refreshTokenSubject.next(null). return this:auth.refreshToken(tokens);pipe( switchMap((token. any) => { this.isRefreshing = false. this;refreshTokenSubject.next(token.token); this.db.removeAll('token'). this,db;storage.set('token'.token), return next.handle(this;addToken(request; token.token)). })), } else { return this,refreshTokenSubject.pipe( filter(token => token.= null), take(1); switchMap(jwt => { return next;handle(this.addToken(request, jwt)); })); } }

This is an example of ax endpoint in x service:

getProfessionalData = (userId: any) => {
    return this.http.get(`${this.url}/professional/${userId}`);
}

and this is a subscription in an x component where i want to continue, retry or refresh the subscription after refreshing the token in the 401 interceptor.

this.pro.getProfessionalData(userId).subscribe(
  (professional: Professional) => {
    this.db.addItem('professional', professional).then(() => {
      this.db.addItem('userId', userId).then(() => {
        this.ui.router.navigate(['/menu/home']);
        this.ui.closeSwalLoader();
      });
    });
  },
  (err) => err
);

Answer 1

just add return before you return your handling tricks. without return the logic just doesn't work.

if (error instanceof HttpErrorResponse && error.status === 401) {
          return this.handle401Error(request, next,token);