Implementing Angular Permissions using Route AuthGuards

In this blog, we'll see how to use Angular's route guards to help with authentication.

What are Route Guards?

Angular route guards are interfaces, which checks whether the router allows navigation for the user requested route.

There are different guard types we can use to protect our routes, each of then can be called on particular sequence:

  • CanActivate - Decides whether the requested route can be activated
  • CanActivateChild - Decides whether the children routes of a route can be activated
  • CanDeactivate - Decides whether the requested route can be deactivated
  • CanLoad - Decides if a module can be loaded lazily

Here we see an Example for canActivate guard type,

Eg: When a user is not authenticated and requested for the user dashboard route, we should not permit that route. the user can access that page only if a user is authenticated.

Let's create a component for the UserDashboard

ng g generate components/UserDashboard

Add userdashboard route in your application app.router.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserDashboardComponent } from './components/user-dashboard.component';

export const router: Routes = [
    {path: 'user-dashboard' , component: UserDashboardComponent},
];

Here we haven't given any authguards for route, So everyone can access this page without any permission.

Let's create a service component using below command

ng g service services/authguard

Now, this will add in your application app.module.ts in providers, So that we can use that service in your entire application.

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(public router: Router) {}

  canActivate(): boolean {
   const token = localStorage.getItem('token');
    if (!token) {
      this.router.navigate(['login']);
      return false;
    }
    return true;
  }
}

Now, to provide permission for the specific route add this service for that route. At that time when a user hits the route first checks for the authguard based on the return response renders that page.

If it returns true, then page is visible for that user, otherwise user can't be visible that page.

In your app.router.ts update the router with AuthGuard

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserDashboardComponent } from './components/user-dashboard.component';
import { AuthGuard } from './services/authguard';

export const router: Routes = [
    {path: 'user-dashboard' , component: UserDashboardComponent, canActivate: [AuthGuard]},
];

Posted On 29 September 2018 By MicroPyramid


Need any Help in your Project?Let's Talk

Latest Comments
Related Articles
Angular 2 - Getting Started

Angular 2 - Getting Started
Angular 2 is an open source Javascript framework to build web applications or single page applications in HTML and Javascript. ...

Continue Reading...
Introduction to Angular2 to build client-side applications

introduction to angular2 to build client side applications with different components

Continue Reading...
How to use Forms in Angular4

In this blog we'll see how to use forms of different types reactive and template driven in your angular application.

Continue Reading...
open source packages

Subscribe To our news letter

Subscribe and Stay Updated about our Webinars, news and articles on Django, Python, Machine Learning, Amazon Web Services, DevOps, Salesforce, ReactJS, AngularJS, React Native.
* We don't provide your email contact details to any third parties