Route Guard example in Angular 6

Let us extent our Angular Routs example and add some route guards to the example. Let us add the most basic route guard CanActivate to the example. Let us begin by adding 2 services auth service and a route-guard service as follows.

ng g s auth

ng g s route-guard

The auth service is where we will do the actual authorization logic, the route-guard service will call the auth service to determine if the user can be allowed to access the routes. For the purpose of this example we will return true from the auth service in all cases.

import { Injectable } from '@angular/core';

@Injectable({

  providedIn: 'root'

})

export class AuthService {

  constructor() { }

  public isAuthenticated(): boolean {   

    // Actual authentication like userid / token validation goes here.

    return true;

  }

}

The route-guard service calls the isAuthenticated method of the auth service to decide on providing the route access.

import { Injectable } from '@angular/core';

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

import { AuthService } from './auth.service';

@Injectable({

  providedIn: 'root'

})

export class RouteGuardService implements CanActivate {

  constructor(public auth: AuthService, public router: Router) {}

  canActivate(): boolean {

    if (!this.auth.isAuthenticated()) {

      //Redirect to Unauthorized/Login route here

      console.log('Not Unauthorized, route access denied.');

      return false;

    } else {

      console.log('Authorized, route access granted.');

      return true;

    }

  }

}

Finally we will have to include these services in the app module and configure the route guard in the routing.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';

import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';

import { RouteAppComponent } from './route-app/route-app.component';

import { AboutComponent } from './route-app/about/about.component';

import { ContactComponent } from './route-app/contact/contact.component';

import { RouteGuardService as RouteGuard } from './route-app/route-guard.service';

const appRoutes: Routes = [

  { path: 'about', component: AboutComponent, canActivate: [RouteGuard] },

  { path: 'contact', component: ContactComponent }

];

@NgModule({

  declarations: [

    AppComponent,

    RouteAppComponent,

    AboutComponent,

    ContactComponent

  ],

  imports: [

    RouterModule.forRoot(appRoutes),

    BrowserModule,

    HttpClientModule

  ],

  providers: [],

  bootstrap: [RouteAppComponent]

})

export class AppModule { }

Notice that we have included the canActivate route guard in the /about route, when the user tries to access the /about route, the route guard will be executed, in this example since we return true by default from the auth service all users will have access to the route.

The output will be as follows.