Angular 6 – Implement Auth Guard to your project

Categories Angular, Software Development, Start Coding

I do have a side project running there I developed a Node.js backend and came accross private routes. My implementation in the backend works like a charm. So I asked myself if there is any possibility in Angular to do the same thing with router links.
There is and it called Rotuer Guards. Let´s dive in the artice hope you enjoy it and learn something because I did already.


What this post will cover:

  • 4 different types of Rotuer Guards
  • Example of an Login Guard of my To-Do Frontend with CanActivate

Guard Types

We will take a quick look at the few different types of guards. There are four different types of Guards

CanActivate
  • Checks to see if a user can visit a specific route
CanActivateChild
  • Checks to see if a user can visit a routes children
CanDeactivate
  • Checks to see if a user can exit a route
CanLoad

Checks to see if a user can route to module that is lazy loaded.

I´m going show you an example for CanActivate Guard based on my To-Do frontend which is written with Angular 6.

Implement AuthGuard – CanActivate

Create Auth Guard

Guards return either true if the user can access a router or false if they don´t.  Let´s create a simple CanActivate guard. Just go to your root folder of your project and open the terminal and type in.

With the use of Angular CLI , we easily generated  a Auth Guard. Once this command ran. it will create two new Typescript files.

  • auth.guard.ts -> This is the guard
  • auth.guard.spec.ts -> This is the testfile for auth.guard.ts

generate-auth-guard

Use Auth Guard

Now after we successfully created the Auth Guard we need to switch over to app.module.ts because the Auth Service needs a provider.


A provider is an instruction to the Dependecy Injection system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide.

After that is done let´s move on to say our route that it gets protected by a guard. For that open up your app-routing.module.ts or where ever your routes are defined. Add canActivate: [AuthGuard] to your route that shold get protected.



Now after that is done let´s configure your AuthGuard. By configure I mean that we tell the guard when he should let the user pass to the protected route. For that open up your auth.guard.ts file. My guards let the user pass if the token that I´m getting after the login can be found in the Session Storage that looks like this.


You now have an brief overview how to use Auth Guard. All the examples in this blog post have been showing examples, which is more than enough to begin with. If you want to take a look at other article I wrote feel free to visit my blog.

Other Post about Angular:

https://modev.net/angualar-device-detector/

Hope you guys and girls enjoyed reading this as much as I enjoyed writing it. Do you think this tutorial will be of help to someone? Do not hesitate to share. If you liked it, share it somewhere else or subscribe to my blog.

Leave a Reply

Your email address will not be published. Required fields are marked *