Avoid pitfall with the header bar in Angular
I will show you a simple structure for your routing in Angular to handle a Header Bar easily and avoid one pitfall i saw happening.
Short and sweet => check the online demo.
The trick here is that the header bar is not inside the app.component you have a proxy route with main-layout.component that handle it.
What is the pitfall you avoid using this approach vs adding your headerbar directly in your app.component outside of any router-outlet ?
The problem that may happen if you do add your header bar in you app.component :
. Your header bar can trigger in one of your projects a secured backend API call.
. Your header bar is not under your guards (AuthGuard included).
. Refresh page for example without login page when you are in the home page of the App with a token expired => 2 attempts of refresh token can happen at the same time one from the header bar and the other from the auth-guard.
. ENDUP with a redirect to an error page or a push of error toast because the 2 parallel http calls in the previous step can invalidate one of the calls (i don’t go in more details about the race condition here).
Solutions
solution 1 => You have to add a special logic to handle this scenario…solution 2 => Structure your routing for the header bar usage as in the demo link on top.
Note: this is valid for any component you think to add to the app.component and does need an auth token. The proxy route solves it forever and ever.
You found this post helpful! give it some 👏👏👏.
Thank you
