Open In App
Related Articles

Auth Guards in Angular 9/10/11

Improve Article
Save Article
Like Article

AuthGuard is used to protect the routes from unauthorized access in angular.

How AuthGuard Works?

Auth guard provide lifecycle event called canActivate. The canActivate is like a constructor. It will be called before accessing the routes. The canActivate has to return true to access the page. If it returns false, we can not access the page. We can write our user authorization and authentication logic inside the canActivate function.

AuthGuard is used to protect the routes from unauthorized access

So here we are creating an AuthGuard in angular that will protect our routes from unauthorized access.

Example: We can create an AuthGuard by running simple command using CLI.

ng g guard services/auth

The above command creates the AuthGuard inside the services folder and the AuthGuard name is auth.


import { Injectable } from "@angular/core";
import {
} from "@angular/router";
import { AuthService } from "./auth.service";
export class AuthGuard implements CanActivate {
        private authService: AuthService,
        private router: Router) { }
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): boolean | Promise<boolean> {
        var isAuthenticated = this.authService.getAuthStatus();
        if (!isAuthenticated) {
        return isAuthenticated;

Inside the canActivate function, we are checking whether the user is authenticated or not and “getAuthStatus” method returns a boolean value. So based on this value we return the value from canActivate method. If the “getAuthStatus” return value means user is authenticated then we allow the user to access the page otherwise we navigate the user to the login page.

Then we have to update our routing file so which route is protected by AuthGuard and which route is accessible for every user.


import { NgModule } from '@angular/core';
import { Routes, RouterModule } 
from '@angular/router';
import { AuthGuard } 
from './services/auth.guards';
import { LoginComponent } 
from './auth/login/login.component';
import { SignupComponent } 
from './auth/signup/signup.component';
import { PostCreateComponent } 
from './posts/post-create/post-create.component';
import { PostListComponent } 
from './posts/post-list/post-list.component';
const routes: Routes = [
  { path: ''
  component: PostListComponent },
  { path: 'create'
  component: PostCreateComponent, 
  canActivate: [AuthGuard]},
  { path: 'edit'
  component: PostCreateComponent, 
  canActivate: [AuthGuard] },
  { path: 'login'
  component: LoginComponent },
  { path: 'signup'
  component: SignupComponent }
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [AuthGuard]
export class AppRoutingModule { }

Here inside the routes array, we have provided the canActivate: [AuthGuard] to “create” and “edit” routes so these two routes are only accessible to authenticated users and other routes are open for all users.

{ path: ‘create’, component: PostCreateComponent, canActivate: [AuthGuard]},
{ path: ‘edit’, component: PostCreateComponent, canActivate: [AuthGuard] },

Make sure to import AuthGuard in this routing file and also add it inside @NgModule providers.

imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [AuthGuard]

So that’s how we can protect routes from un-authorized access in AngularJS.

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 03 Nov, 2021
Like Article
Save Article
Similar Reads
Complete Tutorials