I see a lot of different implementations of Auth Guards around the web.

The implementation is quite simple. In most cases, you will find yourself doing something like this:

And then you will add the guard to any protected route.

As you see, we need to repeat the same line of code whenever there is a new protected route. Of course, it’s not the end of the world, but we can do better and not write redundant configuration.

Let’s use a componentless route as a parent. Componentless routes consume URL segments without instantiating components.

Componentless routes are useful when the same configuration apply to all child routes

For example guards, resolvers, params, etc.,

Now let’s see how we can achieve the same thing with a componentless route.

And we also need to change the method name in our guard.

Now every time you navigate to /todos or /blog route, the AuthGuard will run. 😎

You can also achieve the same thing in Angular version 4 with the following code:

And that’s how it looks with lazy-load routes:

🔥 Last but Not Least, Have you Heard of Akita?

Akita is a state management pattern that we’ve developed here in Datorama. It’s been successfully used in a big data production environment, and we’re continually adding features to it.

Akita encourages simplicity. It saves you the hassle of creating boilerplate code and offers powerful tools with a moderate learning curve, suitable for both experienced and inexperienced developers alike.

I highly recommend checking it out.

Follow me on Medium or Twitter to read more about Angular, Vue and JS!