Angular Smart Interceptor — Queue of Requests
Tags: angular, interceptor
Published: 2019-06-12 14:44:09

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

<h3>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.</h3>

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.](https://stackblitz.com/edit/smart-interceptor)

![Login page](https://cdn-images-1.medium.com/max/2000/1*YHLTeTBoWzOOZqmZkMF49Q.png)

![Tables Page](https://cdn-images-1.medium.com/max/1800/1*iRjFmHVgQkWMvCc_qhjmTA.png)

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](https://cdn-images-1.medium.com/max/800/1*wOYMy5qYjbIAhhBv7NtUQg.png)

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](https://cdn-images-1.medium.com/max/800/1*gQ8s5Y-F42_NTLaGmWloMQ.png)

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

![Main Interceptor](https://cdn-images-1.medium.com/max/1000/1*vxAxsHjmjm6lXLecGRlcXg.png)

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

![Import Interceptor](https://cdn-images-1.medium.com/max/800/1*k1XIK2b-XZaHc8r51DjfnA.png)
![Import Interceptor](https://cdn-images-1.medium.com/max/800/1*7I0xcd6v_tSGUqwzR3L1Jg.png)

<h3>What happens when the Access Token expires?</h3>
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](https://cdn-images-1.medium.com/max/800/1*7xVnyvia2pbo42V593_P8A.png)

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

![Error Interceptor](https://cdn-images-1.medium.com/max/800/1*rh9BJ-taldqel5ox_ZehVQ.png)

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

![Error Interceptor](https://cdn-images-1.medium.com/max/800/1*BWE24mCp87v0aSQceLvI9g.png)

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.](https://stackblitz.com/edit/smart-interceptor)

Thanks.