Angular refresh Token

Question

I'm trying to implement RefreshToken functionality for my Ionic App. But apparently the function never executes .flatmap or .mergeMap. And I'm getting my old 'token' and 'refreshToken' from local storage. The API consumes following format.

  {
  "token": "string",
  "refreshToken": "string"
}

Here is my code.

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).catch((errorResponse: HttpErrorResponse) => {
        debugger;
        console.log("Errr Response RefreshTokenInterceptor------", errorResponse);
        debugger;
        const error = (typeof errorResponse.error !== 'object') ? JSON.parse(errorResponse.error) : errorResponse;
        let reqRefData = {
            "token": this.token,
            "refreshToken": this.refresToken
        }

        if (errorResponse.status === 401 && error.error.error === 'Token-Expired') {
            const http = this.injector.get(HttpClient);
            debugger
            let url = Base_Url + 'user/refresh-token';
            console.log(Base_Url + 'user/refresh-token');
            debugger;
            return this.http.post<any>(url, reqRefData)
                // .flatMap(data => {
                .mergeMap(data => {
                    debugger;
                    console.log("!!!!!Flatmap Data ", data);
                    localStorage.setItem('my_token', data.token);
                    debugger;
                    const cloneRequest = request.clone({ setHeaders: { 'Authorization': `Bearer ${data.token}` } });
                    debugger;

                    return next.handle(cloneRequest);
                });
        }

        return Observable.throw(errorResponse);
    });

}}

I've also tried using .flatMap and .MergeMap. What am I doing wrong here?

Answer 1

Do you get an error message for a cyclic dependency ? Making an HTTP request from within the HTTP interceptor might be throwing it.