A Computer Science student and a passionate about exploring the world of tech.
One possible way to implement canactivateFn to prevent unauthorized access to the user dashboards is to use a service that stores the user type (customer or delivery partner) and the login status. Then, in the canactivateFn function, you can check the user type and the login status and return true or false accordingly. For example: // user.service.ts import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class UserService { // a behavior subject that emits the user type and login status private user$ = new BehaviorSubject<{type: string, loggedIn: boolean}>({type: null, loggedIn: false}); constructor() { } // a method to set the user type and login status setUser(type: string, loggedIn: boolean) { this.user$.next({type, loggedIn}); } // a method to get the user type and login status as an observable getUser() { return this.user$.asObservable(); } } // auth.guard.ts import { CanActivateFn, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router'; import { UserService } from './user.service'; import { inject } from '@angular/core'; import { map } from 'rxjs/operators'; // a canactivateFn function that takes the expected user type as a parameter export const authGuard = (expectedType: string): CanActivateFn => { return (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => { // get the user service instance using inject const userService = inject(UserService); // get the router instance using inject const router = inject(Router); // return an observable that maps the user type and login status to a boolean or a url tree return userService.getUser().pipe( map(user => { // if the user is logged in and has the expected type, return true if (user.loggedIn && user.type === expectedType) { return true; } // otherwise, redirect to the login page and return false router.navigate(['/login']); return false; }) ); }; }; // app-routing.module.ts import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { CustomerDashboardComponent } from './customer-dashboard/customer-dashboard.component'; import { DeliveryPartnerDashboardComponent } from './delivery-partner-dashboard/delivery-partner-dashboard.component'; import { LoginComponent } from './login/login.component'; import { authGuard } from './auth.guard'; const routes: Routes = [ // a route for the login page { path: 'login', component: LoginComponent }, // a route for the customer dashboard that uses the authGuard function with 'customer' as the expected type { path: 'customer-dashboard', component: CustomerDashboardComponent, canActivate: [authGuard('customer')] }, // a route for the delivery partner dashboard that uses the authGuard function with 'delivery-partner' as the expected type { path: 'delivery-partner-dashboard', component: DeliveryPartnerDashboardComponent, canActivate: [authGuard('delivery-partner')] }, // a default route that redirects to the login page { path: '**', redirectTo: '/login' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }