রাউট গার্ডস (CanActivate, CanDeactivate ইত্যাদি)

রাউট গার্ডস Angular অ্যাপ্লিকেশনের গুরুত্বপূর্ণ একটি ফিচার যা রাউট পরিবর্তনের পূর্বে কিছু শর্ত যাচাই করে। এটি ব্যবহারকারীর অ্যাপ্লিকেশন বা রাউটের নির্দিষ্ট অংশে প্রবেশের অনুমতি বা বাধা দিতে ব্যবহৃত হয়। রাউট গার্ডস মূলত CanActivate, CanDeactivate, CanLoad, Resolve, এবং CanActivateChild নামে কয়েকটি গার্ড প্রদান করে যা বিভিন্ন পরিস্থিতিতে ব্যবহৃত হয়।

রাউট গার্ডসের প্রকারভেদ

1. CanActivate

CanActivate গার্ডটি একটি রাউট এক্সেস করার আগে রিটার্ন করা একটি শর্ত চেক করে। যদি শর্তটি পূর্ণ হয়, তবে রাউটটি অ্যাক্সেস করা যাবে, নতুবা ব্যবহারকারী অন্য কোথাও রিডিরেক্ট হবে। এটি সাধারণত ইউজার অথেনটিকেশন বা অথোরাইজেশনের জন্য ব্যবহৃত হয়।

উদাহরণ:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';

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

  constructor(private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    // Example: Check if user is logged in
    if (localStorage.getItem('userLoggedIn')) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

এখানে, AuthGuard গার্ডটি ইউজার যদি লগইন না করে থাকে তবে /login পেজে রিডিরেক্ট করবে।

2. CanDeactivate

CanDeactivate গার্ডটি তখন ব্যবহার করা হয় যখন একটি ব্যবহারকারী কোনো কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে যেতে চায়, এবং আপনি চাইলে তার আগে কিছু নিশ্চিতকরণ (confirmation) বা শর্ত পরীক্ষা করতে পারেন। এটি সাধারণত ফর্ম সাবমিশন বা পেজের পরিবর্তন পূর্বে কোনো সতর্কীকরণ দেখানোর জন্য ব্যবহৃত হয়।

উদাহরণ:

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable({
  providedIn: 'root'
})
export class UnsavedChangesGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate): Observable<boolean> | Promise<boolean> | boolean {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

এখানে, CanComponentDeactivate ইন্টারফেসটি সুনির্দিষ্টভাবে canDeactivate() মেথডের জন্য কন্ট্রোল প্রদান করে, যা ফর্ম বা পেজের পরিবর্তন পূর্বে যাচাই করবে।

3. CanLoad

CanLoad গার্ডটি নির্দিষ্ট মডিউল লোড হওয়ার আগে চেক করে। এটি সাধারণত lazy-loaded মডিউল লোড করার আগে ব্যবহৃত হয়, যাতে শুধুমাত্র সঠিক ইউজাররা সেই মডিউল অ্যাক্সেস করতে পারে।

উদাহরণ:

import { Injectable } from '@angular/core';
import { CanLoad, Route, UrlSegment, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AdminGuard implements CanLoad {
  constructor(private router: Router) {}

  canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {
    if (localStorage.getItem('userRole') === 'admin') {
      return true;
    } else {
      this.router.navigate(['/not-authorized']);
      return false;
    }
  }
}

এখানে, AdminGuard মডিউল লোড হওয়ার আগে ইউজারের রোল চেক করবে এবং যদি ইউজার admin না হয় তবে তাকে not-authorized পেজে রিডিরেক্ট করবে।

4. CanActivateChild

CanActivateChild গার্ডটি সাব-রাউটগুলোর জন্য ব্যবহৃত হয়। এটি মূলত কোনো প্যারেন্ট রাউটের অধীনে থাকা চাইল্ড রাউটগুলোর জন্য রেগুলেশন সেট করতে ব্যবহৃত হয়।

উদাহরণ:

import { Injectable } from '@angular/core';
import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AdminChildGuard implements CanActivateChild {

  canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (localStorage.getItem('userRole') === 'admin') {
      return true;
    } else {
      return false;
    }
  }
}

এখানে, AdminChildGuard গার্ডটি চাইল্ড রাউটগুলোর জন্য ইউজারের রোল যাচাই করবে এবং শুধুমাত্র admin রোলধারী ইউজারকে সেগুলি অ্যাক্সেস করতে দেবে।

রাউট গার্ডস কনফিগারেশন

রাউট গার্ড ব্যবহার করার জন্য আপনাকে রাউট কনফিগারেশন-এ গার্ড যুক্ত করতে হবে। উদাহরণস্বরূপ:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './guards/auth.guard';

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

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

এখানে, canActivate: [AuthGuard] ব্যবহার করে, হোম পেজে যাওয়ার আগে AuthGuard গার্ডটি চেক করবে।

সারাংশ

Angular রাউট গার্ডস আপনাকে রাউট এবং কম্পোনেন্ট পরিবর্তনের আগে বিভিন্ন শর্ত পরীক্ষা করার সুযোগ দেয়। এটি ইউজার অথেনটিকেশন, অথোরাইজেশন, ফর্ম সাবমিশন, এবং নির্দিষ্ট রাউট বা মডিউল লোডে শর্তাবলী নির্ধারণ করতে সহায়তা করে, যা অ্যাপ্লিকেশনকে নিরাপদ এবং ব্যবহারযোগ্য রাখে।