DEV Community

loading...

Angular Smart Interceptor — Queue of Requests

davidrnr profile image DavidRnR ・3 min read

Hi everyone! My name is David Martín and I’m from Argentina.

Let’s create a Smart Interceptor with JWT Auth and list some Programming Languages and Operatives System, using Access Token, Refresh Token, and Queue of Requests.

I created a Backend- NodeJS + MongoDB with the next endpoints:
/api/auth/signin

/api/auth/token

/api/app/programmingLang (Access Token required)

/api/app/os (Access Token required)

I’ve build a simple Angular App with a Login Page and a Home Page. By the way, I’m using Angular Material.

Here is the live demo in Stackblitz.

Login page

Tables Page

I’m not gonna talk about build the APP, only the Interceptor. But a quick view about Login is, when the User sing in, the app saves in the localStorage of the browser an access_token and a refresh_token. Then the APP can handle the auth in the router with canActivate and the service AuthGuard.

Router

PLs (Programming Languages) and OSs (Operative Systems) need auth. So those requests need the Access Token. Let’s create an Interceptor and add the Access Token to every request.

I created a new folder /helper with these two files.

Helper folder

“Main Interceptor” gonna add the Access Token to every request.

Main Interceptor

Add the Interceptor to the AppModule, app.module.ts

Import Interceptor
Import Interceptor

What happens when the Access Token expires?

The Access Token has got a time expiration. Then, the next request gonna fails (401 error).

With the Refresh Token the App can get a new Access Token calling the endpoint /api/auth/token.

Home Page load PLs and OSs, two requests. Now, if PLs fails (401 error) we can get a new Acces Token. But…

How to handle the other request?

Error Interceptor needs a Queue. For example, imagine an App with 6 requests in one Page. The first one fails (401 error), Error Interceptor tries to get the new Access Token, but at the same time, the other 5 requests fail as well. So those 5 requests need to wait for the new token and then try again.

Services in Angular are a singleton (One instance). When the Interceptor is trying to get the new Access Token, the variable “static accessTokenError” handle the status.

Error Interceptor

Build the body with the refresh token and try to get the new tokens.

Error Interceptor

When “ErrorInterceptor.accessTokenError is true” call a method to keep waiting for the request until getting the new Access Token.

Error Interceptor

I’ve mixed Observables with vanilla JS because to me, it was better without subscribing any function, etc.

You can test this Demo with, test@test.com 1234test

After login, open DevTools, go to Application, change the access_token and refresh the page. Check the Network tab.

Here is the live demo in Stackblitz.

Thanks.

Discussion

pic
Editor guide
Collapse
adesfire profile image
Adesfire

Hi David,
I have gone through the subscription process on that site, just to thank you so much for this clear and concise how-to.
I spent three days trying to find this refresh mechanism explanation on the web, however, the most famous articles are partial or outdated.

Thanks to your post, I was able to fix and understand the whole thing in less than 10 minutes.

Continue the good work, and thank you very much!

Collapse
belal55 profile image
Md. Belal Hosen

thanks a lot man... working perfectly. Best guide on refresh token with angular interceptor. :)

Collapse
davidrnr profile image
DavidRnR Author

You're welcome! The code is updated. Check my Stackblizt. Full RxJS!