DEV Community

Cover image for Angular Route Guards Simplified
John Peters
John Peters

Posted on


Angular Route Guards Simplified

Within Angular Routing, we can add a key (canActivate) to each route object as shown below.

    path: "dialog",
    component: DialogComponent,
    canActivate: [canActivateService]
Enter fullscreen mode Exit fullscreen mode

The Angular Router logic will first call the service we've named canActivateService to determine to proceed further. The canActivateService must implement the CanActivate interface.


The CanActivate interface ensures a function named canActivate exists. The router calls the canActivate function prior to allowing the route to continue.

import { ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";
import { Injectable } from "@angular/core";
import { CanActivate } from "@angular/router";
import { RestangularService } from "./restangular.service";
import { EventService } from "./event.service";

   providedIn: "root"
export class canActivateService implements CanActivate { 

constructor(private rs: RestangularService, private es: EventService) {}
   // returns a true or false promise
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
Enter fullscreen mode Exit fullscreen mode

Can Promises be used?

In the code above, we are using a Restangular HTTP request (Observable) to get user info. We've wrapped it in a promise so that the canActivate function passes back a Promise to the router.

   // returns a true or false promise
   getIdentityInfo(): Promise<boolean> {
      // Convert the observable to a promise.
      let prm = new Promise<boolean>((resolve, reject) => {
         // this is the observable
               result => {
                  // resolve the promise
               error => {
                  // we take control on error showing an error
      return prm;
Enter fullscreen mode Exit fullscreen mode

When we resolve the promise to true, the user is allowed to navigate, otherwise, and error is shown.

We are easily able to add other criteria to the route guard, as we've neatly separated the code into following the SRP principal.

In the future we'll add canDeactivate which decides if the user can leave the page (in case they haven't saved their data).

All told; a pretty simple and nice routing feature out-of-the-angular-box.


Top comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesnโ€™t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.