How to Generate CanActivate In Angular?

In Angular, protecting routes is important to make sure that unauthorized users cannot access certain parts of your application. The CanActivate interface allows you to implement route guards that determine whether a route can be activated based on specific conditions, such as user authentication or permissions. By creating a service that implements CanActivate, you can control access to your routes.

Prerequisites

• Angular CLI
• Basics of HTML, CSS, and JavaScript
• NodeJS and NPM

CanActivate in Angular

In Angular, CanActivate is a route guard used to determine if a route can be activated. It helps protect routes from unauthorized access. You implement it by creating a service that implements the CanActivate interface and then use it in the route configuration.

Syntax:

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
): boolean {
    return this.checkAuthenticationStatus();
}

Approach To Generate CanActivate In Angular

• Use the Angular CLI command ng generate guard <guard-name> to create a new guard. This command will generate a TypeScript file with boilerplate code that implements the CanActivate interface. The guard is a service that will control whether or not a route can be activated.
• In the newly created guard file, you'll find a method named canActivate. This method should contain the logic that determines whether the route should be accessible. Typically, this logic might involve checking if the user is authenticated or has the necessary permissions.
• After implementing the guard's logic, you'll need to use it in your routing module. In your app-routing.module.ts file, import the guard and apply it to the routes you want to protect by adding the canActivate property to the route configuration.
• The guard should include logic to check conditions like whether the user is logged in, has a valid token, or meets specific criteria. This might involve checking values stored in services, local storage, or making API calls.

Steps to Generate CanActivate in Angular

Step 1: Install Angular CLI

If you haven’t installed Angular CLI yet, install it using the following command

npm install -g @angular/cli

Step 2: Create a New Angular Project

ng new can-activate
cd can-activate

Step 3: Generate CanActivate Guard

You can generate a CanActivate guard using Angular CLI:

ng generate guard auth

Step 4: Generate Service

You can generate a Service using Angular CLI:

ng generate service auth

Step 5: Create Components

ng generate component home
ng generate component login

Folder Structure

Dependencies

"dependencies": {
    "@angular/animations": "^18.1.4",
    "@angular/common": "^18.1.4",
    "@angular/compiler": "^18.1.4",
    "@angular/core": "^18.1.4",
    "@angular/forms": "^18.1.4",
    "@angular/platform-browser": "^18.1.4",
    "@angular/platform-browser-dynamic": "^18.1.4",
    "@angular/router": "^18.1.4",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.10"
}

Example: Create the required files as seen in the folder structure and add the following codes.

App Component Code

Below mentioned is the App Component which is the first component which gets loaded which an Angular Application is built. It initalizes all other components in order to run them.

<!-- src/app/app.component.html -->
<div style="text-align: center;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>Generate CanActivate in Angular</h3>
    <router-outlet></router-outlet>
</div>

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
    { path: '', component: HomeComponent, canActivate: [AuthGuard] },
    { path: 'login', component: LoginComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

// src/app/app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'can-activate';
}

// src/app/app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent,
        LoginComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Home Component Code

Below mentioned is the HomeComponent code in Angular, demonstrating how to protect a route using the CanActivate guard and providing a logout functionality. The component includes a button that triggers the logout method to log the user out.

<!-- src/app/home/home.component.html -->
<h3>Welcome to the Home Page</h3>
<p>This page is protected by CanActivate guard.</p>
<button (click)="logout()">Logout</button>

// src/app/home/home.component.ts
import { Component } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
})
export class HomeComponent {
    constructor(private authService: AuthService) { }

    logout() {
        this.authService.logout();
    }
}

Login Component Code

Below mentioned is the LoginComponent code in Angular, where the user can log in to access protected routes. Upon successful login, the user is redirected to the home page.

<!-- src/app/login/login.component.html -->
<h3>Login Page</h3>
<p>Please log in to access protected routes.</p>
<button (click)="login()">Login</button>

// src/app/login/login.component.ts
import { Component } from '@angular/core';
import { AuthService } from '../auth.service';
import { Router } from '@angular/router';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})
export class LoginComponent {
    constructor(private authService: AuthService, private router: Router) { }

    login() {
        this.authService.login();
        this.router.navigate(['/']);
    }
}

CanActivate Guard

Below mentioned is the AuthGuard code in Angular, where the CanActivate guard checks the user's authentication status before allowing access to a route. If the user is not authenticated, they are redirected to the login page.

// src/app/auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { AuthService } from './auth.service';

@Injectable({
    providedIn: 'root'
})
export class AuthGuard implements CanActivate {

    constructor(private authService: AuthService, private router: Router) { }

    canActivate(): Observable<boolean> | Promise<boolean> | boolean {
        return this.authService.isAuthenticated$.pipe(
            map((isAuthenticated: boolean) => {
                if (!isAuthenticated) {
                    this.router.navigate(['/login']);
                    return false;
                }
                return true;
            })
        );
    }
}

Services

Below mentioned is the AuthService code in Angular, which manages user authentication status using a BehaviorSubject. The service provides methods to log in, log out, and observe the user's authentication state.

// src/app/auth.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class AuthService {
    private authenticated = new BehaviorSubject<boolean>(false);
    isAuthenticated$ = this.authenticated.asObservable();

    login() {
        this.authenticated.next(true);
    }

    logout() {
        this.authenticated.next(false);
    }
}

Open the terminal, run this command from your root directory to start the application

ng serve --open

Open your browser and navigate to http://localhost:4200

Output