Answer:66

Author: T-DiegoF

apps/angular/66-functional-auth-guard/src/app/admin.guard.ts

@@ -1,19 +1,10 @@
-import { Injectable } from '@angular/core';
-import { CanActivate, Router } from '@angular/router';
+import { inject } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
 import { AuthService } from './auth.service';
 
-@Injectable({ providedIn: 'root' })
-export class AdminGuard implements CanActivate {
-  constructor(
-    private authService: AuthService,
-    private router: Router,
-  ) {}
+export const adminGuard: CanActivateFn = () => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
 
-  canActivate(): boolean {
-    if (this.authService.isLoggedIn && this.authService.role === 'admin') {
-      return true;
-    }
-    this.router.navigate(['/']);
-    return false;
-  }
-}
+  return authService.isAdmin() || router.createUrlTree(['/']);
+};

apps/angular/66-functional-auth-guard/src/app/app.component.spec.ts

@@ -1,60 +1,54 @@
 import { TestBed } from '@angular/core/testing';
-import { provideRouter } from '@angular/router';
-import { page, userEvent } from 'vitest/browser';
-import { AdminComponent } from './admin.component';
-import { AdminGuard } from './admin.guard';
-import { AuthGuard } from './auth.guard';
+import { Router, provideRouter } from '@angular/router';
+import { AppComponent } from './app.component';
 import { AuthService } from './auth.service';
-import { DashboardComponent } from './dashboard.component';
-import { HomeComponent } from './home.component';
 import { routes } from './app.routes';
-import { AppComponent } from './app.component';
 
-describe('Auth Guards', () => {
+describe('Functional Auth Guards', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       providers: [provideRouter(routes)],
     });
     TestBed.createComponent(AppComponent);
   });
 
-  describe('AuthGuard', () => {
-    it('Then should redirect to / when not logged in', async () => {
-      const guard = TestBed.inject(AuthGuard);
-      const result = guard.canActivate();
-      expect(result).toBeFalsy();
+  describe('authGuard', () => {
+    it('should redirect to / when not logged in', async () => {
+      const router = TestBed.inject(Router);
+      await router.navigate(['/dashboard']);
+      expect(router.url).toBe('/');
     });
 
-    it('Then should allow access when logged in', async () => {
+    it('should allow navigation when logged in', async () => {
       const authService = TestBed.inject(AuthService);
+      const router = TestBed.inject(Router);
       authService.login('user');
-      const guard = TestBed.inject(AuthGuard);
-      const result = guard.canActivate();
-      expect(result).toBe(true);
+      await router.navigate(['/dashboard']);
+      expect(router.url).toBe('/dashboard');
     });
   });
 
-  describe('AdminGuard', () => {
-    it('Then should redirect to / when not logged in', async () => {
-      const guard = TestBed.inject(AdminGuard);
-      const result = guard.canActivate();
-      expect(result).toBeFalsy();
+  describe('adminGuard', () => {
+    it('should redirect to / when not logged in', async () => {
+      const router = TestBed.inject(Router);
+      await router.navigate(['/admin']);
+      expect(router.url).toBe('/');
     });
 
-    it('Then should redirect to / when logged in as user', async () => {
+    it('should redirect to / when logged in as user', async () => {
       const authService = TestBed.inject(AuthService);
+      const router = TestBed.inject(Router);
       authService.login('user');
-      const guard = TestBed.inject(AdminGuard);
-      const result = guard.canActivate();
-      expect(result).toBeFalsy();
+      await router.navigate(['/admin']);
+      expect(router.url).toBe('/');
     });
 
-    it('Then should allow access when logged in as admin', async () => {
+    it('should allow navigation when logged in as admin', async () => {
       const authService = TestBed.inject(AuthService);
+      const router = TestBed.inject(Router);
       authService.login('admin');
-      const guard = TestBed.inject(AdminGuard);
-      const result = guard.canActivate();
-      expect(result).toBe(true);
+      await router.navigate(['/admin']);
+      expect(router.url).toBe('/admin');
     });
   });
 });

apps/angular/66-functional-auth-guard/src/app/app.routes.ts

@@ -1,12 +1,12 @@
 import { Routes } from '@angular/router';
-import { AdminGuard } from './admin.guard';
+import { adminGuard } from './admin.guard';
 import { AdminComponent } from './admin.component';
-import { AuthGuard } from './auth.guard';
+import { authGuard } from './auth.guard';
 import { DashboardComponent } from './dashboard.component';
 import { HomeComponent } from './home.component';
 
 export const routes: Routes = [
   { path: '', component: HomeComponent },
-  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
-  { path: 'admin', component: AdminComponent, canActivate: [AuthGuard, AdminGuard] },
+  { path: 'dashboard', component: DashboardComponent, canActivate: [authGuard] },
+  { path: 'admin', component: AdminComponent, canActivate: [authGuard, adminGuard] },
 ];

apps/angular/66-functional-auth-guard/src/app/auth.guard.ts

@@ -1,19 +1,10 @@
-import { Injectable } from '@angular/core';
-import { CanActivate, Router } from '@angular/router';
+import { inject } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
 import { AuthService } from './auth.service';
 
-@Injectable({ providedIn: 'root' })
-export class AuthGuard implements CanActivate {
-  constructor(
-    private authService: AuthService,
-    private router: Router,
-  ) {}
+export const authGuard: CanActivateFn = () => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
 
-  canActivate(): boolean {
-    if (this.authService.isLoggedIn) {
-      return true;
-    }
-    this.router.navigate(['/']);
-    return false;
-  }
-}
+  return authService.isLoggedIn() || router.createUrlTree(['/']);
+};

apps/angular/66-functional-auth-guard/src/app/auth.service.ts

@@ -1,17 +1,21 @@
-import { Injectable } from '@angular/core';
+import { computed, Injectable, signal } from '@angular/core';
 
 @Injectable({ providedIn: 'root' })
 export class AuthService {
-  isLoggedIn = false;
-  role: 'user' | 'admin' = 'user';
+  private readonly _isLoggedIn = signal(false);
+  private readonly _role = signal<'user' | 'admin'>('user');
+
+  readonly isLoggedIn = this._isLoggedIn.asReadonly();
+  readonly role = this._role.asReadonly();
+  readonly isAdmin = computed(() => this._isLoggedIn() && this._role() === 'admin');
 
   login(role: 'user' | 'admin'): void {
-    this.isLoggedIn = true;
-    this.role = role;
+    this._isLoggedIn.set(true);
+    this._role.set(role);
   }
 
   logout(): void {
-    this.isLoggedIn = false;
-    this.role = 'user';
+    this._isLoggedIn.set(false);
+    this._role.set('user');
   }
 }

apps/angular/66-functional-auth-guard/src/app/home.component.ts

@@ -11,7 +11,7 @@ import { AuthService } from './auth.service';
       <p class="text-gray-600">
         Status:
         <span class="font-semibold">
-          {{ authService.isLoggedIn ? 'Logged in as ' + authService.role : 'Not logged in' }}
+          {{ authService.isLoggedIn() ? 'Logged in as ' + authService.role() : 'Not logged in' }}
         </span>
       </p>