রাউট গার্ড (Route Guard) হল একটি শক্তিশালী Angular ফিচার যা রাউটের অ্যাক্সেস নিয়ন্ত্রণ করতে সাহায্য করে। রাউট গার্ড সাধারণত ব্যবহার করা হয় যখন আপনি চান যে কিছু রাউটে নেভিগেট করার আগে একটি নির্দিষ্ট শর্ত পূর্ণ হতে হবে, যেমন ইউজার অথেন্টিকেশন চেক বা অথরাইজেশন চেক। Angular-এ বিভিন্ন ধরনের রাউট গার্ড রয়েছে, যেমন CanActivate
, CanActivateChild
, CanDeactivate
, CanLoad
ইত্যাদি।
এখানে আমরা দেখব কিভাবে একটি CanActivate রাউট গার্ড ইমপ্লিমেন্ট করা যায়।
রাউট গার্ডগুলি রাউটিং সিস্টেমে একটি বিশেষ দায়িত্ব পালন করে:
১. রাউট গার্ড সার্ভিস তৈরি করা: Angular CLI দিয়ে রাউট গার্ড তৈরি করতে:
ng generate guard auth
এটি একটি auth.guard.ts
ফাইল তৈরি করবে, যেখানে গার্ডের লজিক থাকবে।
২. CanActivate গার্ড ইমপ্লিমেন্ট করা: CanActivate
গার্ডের মাধ্যমে আপনি চেক করতে পারেন যে, ইউজার রাউট অ্যাক্সেস করতে পারবে কিনা।
auth.guard.ts:
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service'; // আপনার AuthService এখানে ইমপোর্ট করতে হবে
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
// এখানে আপনি আপনার AuthService ব্যবহার করে চেক করতে পারেন
if (this.authService.isAuthenticated()) {
return true; // যদি ইউজার অথেন্টিকেটেড থাকে, রাউট অ্যাক্সেস অনুমতি দিন
} else {
this.router.navigate(['/login']); // যদি ইউজার অথেন্টিকেটেড না থাকে, লগইন পেজে রিডিরেক্ট করুন
return false;
}
}
}
এখানে:
AuthService
হচ্ছে একটি সার্ভিস যা ইউজারের অথেন্টিকেশন স্টেট চেক করবে (এটি আপনার অ্যাপ্লিকেশন অনুযায়ী কাস্টমাইজ করা যাবে)।canActivate
মেথডটি যদি true
রিটার্ন করে, তবে রাউট অ্যাক্সেস করা যাবে, অন্যথায় ইউজারকে অন্য পেজে রিডিরেক্ট করা হবে।৩. রাউট কনফিগারেশনে গার্ড যুক্ত করা: একবার রাউট গার্ড তৈরি হয়ে গেলে, এটি রাউট কনফিগারেশনে যুক্ত করতে হবে।
app-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LoginComponent } from './login/login.component';
const routes: Routes = [
{
path: 'dashboard',
component: DashboardComponent,
canActivate: [AuthGuard] // AuthGuard যুক্ত করা হল
},
{
path: 'login',
component: LoginComponent
},
{
path: '',
redirectTo: '/login',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
এখানে:
canActivate: [AuthGuard]
দিয়ে রাউট গার্ড যুক্ত করা হয়েছে। এর মানে হলো, dashboard
রাউট অ্যাক্সেস করতে গেলে AuthGuard
প্রথমে ইউজারের অথেন্টিকেশন চেক করবে।Angular-এ আরও কিছু গার্ড রয়েছে, যা বিভিন্ন পরিস্থিতিতে ব্যবহৃত হতে পারে:
CanDeactivate: বর্তমান রাউট থেকে বের হওয়ার আগে গার্ড ব্যবহার করা হয়। এটি সাধারণত ফর্ম সাবমিশন বা ডেটা লস প্রিভেন্ট করার জন্য ব্যবহৃত হয়।
Example:
canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
return confirm('Do you really want to leave this page?');
}
CanLoad: যখন আপনি lazy-loaded মডিউল লোড করবেন, তখন CanLoad
গার্ড ব্যবহার করা হয়। এটি ব্যবহারকারীর অনুমতি চেক করে যে, তারা এই মডিউলটি লোড করতে পারবে কিনা।
Example:
canLoad(): Observable<boolean> | Promise<boolean> | boolean {
return this.authService.isAuthenticated();
}
রাউট গার্ড ব্যবহার করে আপনি Angular অ্যাপে রাউট অ্যাক্সেস নিয়ন্ত্রণ করতে পারেন। CanActivate গার্ড ব্যবহার করে আপনি রাউট লোড হওয়ার আগে ইউজারের অনুমতি চেক করতে পারেন, যেমন ইউজার অথেন্টিকেশন চেক করা। গার্ডগুলো মূলত ইউজারের সিকিউরিটি এবং অ্যাপ্লিকেশনের ফ্লো ম্যানেজমেন্টের জন্য গুরুত্বপূর্ণ টুল হিসেবে কাজ করে।
Read more