Angular-এ গার্ডস (Guards) হলো এমন একটি ফিচার যা রাউট পরিবর্তনের আগে কিছু শর্ত যাচাই করে। এটি ব্যবহারকারীর অ্যাপ্লিকেশনে একটি নির্দিষ্ট রাউট বা পেজে প্রবেশের অনুমতি প্রদান বা বাধা দেয়। Angular-এ বিভিন্ন ধরনের গার্ড রয়েছে, যেমন CanActivate, CanDeactivate, CanLoad, Resolve, CanActivateChild ইত্যাদি, এবং এগুলি রাউট নিরাপত্তা এবং নিয়ন্ত্রণে গুরুত্বপূর্ণ ভূমিকা পালন করে।
1. CanActivate
CanActivate গার্ডটি একটি রাউট এক্সেস করার আগে রিটার্ন করা একটি শর্ত চেক করে। যদি শর্তটি পূর্ণ হয়, তবে রাউটটি অ্যাক্সেস করা যাবে, নতুবা ব্যবহারকারী অন্য কোথাও রিডিরেক্ট হবে। এটি সাধারণত ইউজার অথেনটিকেশন বা অথোরাইজেশনের জন্য ব্যবহৃত হয়।
ব্যবহার উদাহরণ:
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private router: Router) {}
canActivate(): 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. Resolve
Resolve গার্ডটি ব্যবহার করা হয় রাউটটি অ্যাক্সেস করার আগে কিছু ডেটা লোড করার জন্য। এটি একটি অ্যাসিনক্রোনাস অপারেশন যেমন HTTP রিকোয়েস্ট সম্পন্ন করার আগে রাউটটি রেন্ডার হতে দেয় না। এটি সাধারণত রাউট রিজলভ ডেটা বা সাইন-আপ/লগইন ফর্ম পূর্ণ করতে ব্যবহৃত হয়।
ব্যবহার উদাহরণ:
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { DataService } from './data.service';
@Injectable({
providedIn: 'root'
})
export class DataResolver implements Resolve<any> {
constructor(private dataService: DataService) {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
return this.dataService.fetchData();
}
}
এখানে, DataResolver গার্ডটি ব্যবহারকারীকে একটি রাউট অ্যাক্সেস করার আগে প্রয়োজনীয় ডেটা সরবরাহ করবে (যেমন API রিকোয়েস্টের মাধ্যমে ডেটা রিটার্ন করা)।
4. CanLoad
CanLoad গার্ডটি ব্যবহার করা হয় লেজি-লোডেড মডিউল লোড হওয়ার আগে শর্ত যাচাই করার জন্য। এটি মূলত তখন ব্যবহার হয়, যখন আপনি চান শুধুমাত্র নির্দিষ্ট ইউজাররা কিছু মডিউল অ্যাক্সেস করতে পারবে। এটি মডিউল লোড করার পূর্বে শর্ত চেক করে।
ব্যবহার উদাহরণ:
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 রোলধারী ইউজাররা নির্দিষ্ট মডিউল লোড করতে পারবে।
5. CanActivateChild
CanActivateChild গার্ডটি মূলত একটি প্যারেন্ট রাউটের অধীনে থাকা চাইল্ড রাউটগুলোর জন্য ব্যবহৃত হয়। এটি চাইল্ড রাউটের জন্য কিছু শর্ত যাচাই করে প্যারেন্ট রাউটের অধীনে চাইল্ড রাউট এক্সেস করার অনুমতি দেয় বা বাধা দেয়।
ব্যবহার উদাহরণ:
import { Injectable } from '@angular/core';
import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ChildGuard implements CanActivateChild {
canActivateChild(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
// Check some condition for child route access
return true;
}
}
এখানে, ChildGuard গার্ডটি চেক করবে যে প্যারেন্ট রাউটের অধীনে চাইল্ড রাউট অ্যাক্সেস করা যাবে কিনা।
সারাংশ
Angular গার্ডস বিভিন্ন পরিস্থিতিতে রাউটের অ্যাক্সেস নিয়ন্ত্রণ করতে ব্যবহৃত হয়, এবং এর বিভিন্ন প্রকার (CanActivate, CanDeactivate, Resolve, CanLoad, CanActivateChild) অ্যাপ্লিকেশন নিরাপত্তা এবং ডেটা লোডিংয়ের জন্য অত্যন্ত গুরুত্বপূর্ণ। এগুলি ব্যবহারের মাধ্যমে আপনি ইউজার ইন্টারঅ্যাকশন এবং অ্যাপ্লিকেশন ফ্লো নিয়ন্ত্রণ করতে পারেন।
