The Angular Http Interceptor is failing to trigger a new request after refreshing the token

Question

The Angular Http Interceptor is failing to trigger a new request after refreshing the token

In my project, I implemented an HTTP interceptor that manages access token refreshing.
If a user's access token expires and the request receives a 401 error, this function is designed to handle the situation by refreshing the token and re-executing the request with the updated access token.

Below is how the function is called:

return next.handle(request).pipe(catchError((error) => {
  if (error instanceof HttpErrorResponse && error.status === 401) {
    return this.handle401Error(request, next);
  } else {
    return throwError(error);
  }
}));

Here is the implementation of handle401Error method:

handle401Error(request: HttpRequest<any>, next: HttpHandler): any {
    if (!this.isRefreshing) {
      this.isRefreshing = true;
      this.refreshTokenSubject.next(null);

      this.auth.refreshAccessToken().then((token: Token) => {
        this.isRefreshing = false;
        this.refreshTokenSubject.next(token.access_token);
        return next.handle(this.addToken(request, token.access_token));
      });
    } else {
      return this.refreshTokenSubject.pipe(
          filter((token) => token !== null),
          take(1),
          switchMap((token) => {
            return next.handle(this.addToken(request, token));
          }));
    }
  }

I have followed an article to build this interceptor. The token refreshing process works smoothly except for the line:

return next.handle(this.addToken(request, token.access_token));

This line is supposed to resend the request using the newly obtained valid token but somehow it doesn't trigger.

javascript angular typescript http interceptor

Answer 1

Answer №1

The dilemma

this.auth.refreshAccessToken() gives back a promise (I assume based on the .then()).

Clarification

In case you are unfamiliar with promises, they are commonly used to handle asynchronous code. Here is a link to the documentation.

The

this.auth.refreshAccessToken().then()

requires a function as an argument. In this scenario, you have utilized an anonymous arrow function (token: Token) => { ... }.

When you execute

return next.handle(this.addToken(request, token.access_token));

, you are within the arrow function. Therefore, you are not directly returning from handle401Error() but rather to .then().

Although .then() returns a value, currently it's not being returned by you.

Your else block demonstrates the correct approach:

return this.refreshTokenSubject.pipe(                          
          filter((token) => token !== null),
          take(1),
          switchMap((token) => {
            return next.handle(this.addToken(request, token)); 
          }));
    }

The resolution

TLDR;

 return from(this.auth.refreshAccessToken()).pipe(switchMap((token: Token) => {
        this.isRefreshing = false;
        this.refreshTokenSubject.next(token.access_token);
        return next.handle(this.addToken(request, token.access_token));
      }));

Clarification

A quick tip that could simplify things - I recommend using the return type of handle.next() instead of any in determining the return type of handle401Error(), which is

Observable<HttpEvent<any>>

.

You need to return the result of next.handle() within

this.auth.refreshAccessToken().then()

.

There are multiple ways to achieve this, and one Angular/RxJS style stands out.

Promises are similar to observables, and RxJS (v6+) offers a method to convert a promise into an observable. Example:

import { from } from 'rxjs';
const observable = from(promise);

To convert this.auth.refreshAccessToken() into an observable, use:

from(this.auth.refreshAccessToken())

Now that you have an observable, refrain from extracting the value using subscribe since your interceptor should return a final observable subscribed elsewhere.

Instead, leverage pipe, allowing you to apply various operators provided by RxJS. The suitable operator for waiting for the initial observable to emit before returning

next.handle()</code is <a href="https://rxjs.dev/api/operators/switchMap" rel="noreferrer">switchMap</a>.</p>
<p>You'll notice your else block employs this technique:</p>
<pre><code>return this.refreshTokenSubject.pipe(
          filter((token) => token !== null),
          take(1),
          switchMap((token) => {                               
            return next.handle(this.addToken(request, token));
          }));
    }

switchMap() waits for the first observable to emit, passing the value into your callback expecting another observable in return. In your case, replace then() with pipe(switchMap()).

As illustrated in the TLDR section:

 return from(this.auth.refreshAccessToken()).pipe(switchMap((token: Token) => {
        this.isRefreshing = false;
        this.refreshTokenSubject.next(token.access_token);
        return next.handle(this.addToken(request, token.access_token));
      }));

This solution should address your concern. Feel free to leave a comment if further assistance is needed.

Answer 2

The dilemma

this.auth.refreshAccessToken() gives back a promise (I assume based on the .then()).

Clarification

In case you are unfamiliar with promises, they are commonly used to handle asynchronous code. Here is a link to the documentation.

The

this.auth.refreshAccessToken().then()

requires a function as an argument. In this scenario, you have utilized an anonymous arrow function (token: Token) => { ... }.

When you execute

return next.handle(this.addToken(request, token.access_token));

, you are within the arrow function. Therefore, you are not directly returning from handle401Error() but rather to .then().

Although .then() returns a value, currently it's not being returned by you.

Your else block demonstrates the correct approach:

return this.refreshTokenSubject.pipe(                          
          filter((token) => token !== null),
          take(1),
          switchMap((token) => {
            return next.handle(this.addToken(request, token)); 
          }));
    }

The resolution

TLDR;

 return from(this.auth.refreshAccessToken()).pipe(switchMap((token: Token) => {
        this.isRefreshing = false;
        this.refreshTokenSubject.next(token.access_token);
        return next.handle(this.addToken(request, token.access_token));
      }));

Clarification

A quick tip that could simplify things - I recommend using the return type of handle.next() instead of any in determining the return type of handle401Error(), which is

Observable<HttpEvent<any>>

.

You need to return the result of next.handle() within

this.auth.refreshAccessToken().then()

.

There are multiple ways to achieve this, and one Angular/RxJS style stands out.

Promises are similar to observables, and RxJS (v6+) offers a method to convert a promise into an observable. Example:

import { from } from 'rxjs';
const observable = from(promise);

To convert this.auth.refreshAccessToken() into an observable, use:

from(this.auth.refreshAccessToken())

Now that you have an observable, refrain from extracting the value using subscribe since your interceptor should return a final observable subscribed elsewhere.

Instead, leverage pipe, allowing you to apply various operators provided by RxJS. The suitable operator for waiting for the initial observable to emit before returning

next.handle()</code is <a href="https://rxjs.dev/api/operators/switchMap" rel="noreferrer">switchMap</a>.</p>
<p>You'll notice your else block employs this technique:</p>
<pre><code>return this.refreshTokenSubject.pipe(
          filter((token) => token !== null),
          take(1),
          switchMap((token) => {                               
            return next.handle(this.addToken(request, token));
          }));
    }

switchMap() waits for the first observable to emit, passing the value into your callback expecting another observable in return. In your case, replace then() with pipe(switchMap()).

As illustrated in the TLDR section:

 return from(this.auth.refreshAccessToken()).pipe(switchMap((token: Token) => {
        this.isRefreshing = false;
        this.refreshTokenSubject.next(token.access_token);
        return next.handle(this.addToken(request, token.access_token));
      }));

This solution should address your concern. Feel free to leave a comment if further assistance is needed.

Answer 3

Answer №2

It is not necessary for the handle401Error function to return next.handle(...). This action is already taken care of within the intercept function. Instead, simply include the token in the request as usual and then return null; from the handle401Error function. The catchError function should consistently return null unless a specific custom error needs to be thrown.

Answer 4

It is not necessary for the handle401Error function to return next.handle(...). This action is already taken care of within the intercept function. Instead, simply include the token in the request as usual and then return null; from the handle401Error function. The catchError function should consistently return null unless a specific custom error needs to be thrown.

The Angular Http Interceptor is failing to trigger a new request after refreshing the token

Answer №1

The dilemma

Clarification

The resolution

Clarification

Answer №2

Similar questions

Looking to retrieve parameters from a route in Angular 7's Router

Using javascript to store HTML tags in a variable

Ways to retrieve information from a specific key

Retrieving Data from Outside Source using AngularJS

Removing dropdown lists from input forms can be achieved without using jQuery by utilizing vanilla JavaScript

Which type of element does Youtube utilize for the videos on its own domain - <iframe> or <video>?

Constantly loading image with Meteor HTTP request

The window.open function is returning a null value after attempting to open the specified

When sending a POST request in Angular and Node.js, the req.body object is found to be empty {}

The grid flex end is behaving differently than I anticipated

Tips for concealing subsequent pages and displaying pagination in jQuery ajax response

Difficulty maintaining list formatting in AngularJS and Bootstrap due to ng-repeat functionality

Having issues with validating a form using Yup for a Checkbox input?

Ensuring the canvas fits perfectly within its parent div

Forced line break at particular point in text

How can I use jQuery to target elements other than the vertical scrollbar when

Receive real-time updates on incoming messages in your inbox

Combine the jQuery selectors :has() and :contains() for effective element targeting!

Express Validator: The Art of Isolating Validation Logic

Node.JS using Express: Issue : encountering EADDRINUSE error due to address being already in use