Utilizing Angular Guards for Route Navigation Control

{
  "title": "Utilizing Angular Guards for Route Navigation Control",
  "description": "Discover how to implement guards to control access and protect routes in your Angular applications effectively.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "name": "Implement CanActivate Guards for Authentication",
      "description": "Ensure that only authenticated users can access certain routes by implementing CanActivate guards. This enhances security by preventing unauthorized access.",
      "code": [
        "import { Injectable } from '@angular/core';",
        "import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';",
        "import { AuthService } from './auth.service';",
        "",
        "@Injectable({ providedIn: 'root' })",
        "export class AuthGuard implements CanActivate {",
        "  constructor(private authService: AuthService, private router: Router) {}",
        "",
        "  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {",
        "    if (this.authService.isLoggedIn()) {",
        "      return true;",
        "    } else {",
        "      this.router.navigate(['/login']);",
        "      return false;",
        "    }",
        "  }",
        "}"
      ],
      "references": [
        {
          "title": "Complete Guide to Route Guards in Angular 18",
          "url": "https://medium.com/@solomongetachew112/complete-guide-to-route-guards-in-angular-18-real-world-examples-best-practices-and-tips-113d791323d2"
        }
      ]
    },
    {
      "name": "Use CanActivateChild Guards for Nested Routes",
      "description": "Apply CanActivateChild guards to control access to child routes, ensuring that only authorized users can navigate to nested components.",
      "code": [
        "import { Injectable } from '@angular/core';",
        "import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';",
        "import { AuthService } from './auth.service';",
        "",
        "@Injectable({ providedIn: 'root' })",
        "export class AuthChildGuard implements CanActivateChild {",
        "  constructor(private authService: AuthService, private router: Router) {}",
        "",
        "  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {",
        "    if (this.authService.hasChildAccess()) {",
        "      return true;",
        "    } else {",
        "      this.router.navigate(['/not-authorized']);",
        "      return false;",
        "    }",
        "  }",
        "}"
      ],
      "references": [
        {
          "title": "Advanced Techniques for Routing in Angular Applications",
          "url": "https://blog.pixelfreestudio.com/advanced-techniques-for-routing-in-angular-applications/"
        }
      ]
    },
    {
      "name": "Implement CanDeactivate Guards to Prevent Data Loss",
      "description": "Use CanDeactivate guards to warn users about unsaved changes when they attempt to navigate away from a route, preventing accidental data loss.",
      "code": [
        "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 CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {",
        "  canDeactivate(component: CanComponentDeactivate): Observable<boolean> | Promise<boolean> | boolean {",
        "    return component.canDeactivate ? component.canDeactivate() : true;",
        "  }",
        "}"
      ],
      "references": [
        {
          "title": "Angular Routing Best Practices for Efficient Navigation",
          "url": "https://bestpractices.net/angular-routing-best-practices-for-efficient-navigation/"
        }
      ]
    },
    {
      "name": "Use CanLoad Guards with Lazy-Loaded Modules",
      "description": "Implement CanLoad guards to prevent the loading of feature modules until certain conditions are met, enhancing performance and security.",
      "code": [
        "import { Injectable } from '@angular/core';",
        "import { CanLoad, Route, UrlSegment, Router } from '@angular/router';",
        "import { AuthService } from './auth.service';",
        "",
        "@Injectable({ providedIn: 'root' })",
        "export class CanLoadGuard implements CanLoad {",
        "  constructor(private authService: AuthService, private router: Router) {}",
        "",
        "  canLoad(route: Route, segments: UrlSegment[]): boolean {",
        "    if (this.authService.hasModuleAccess()) {",
        "      return true;",
        "    } else {",
        "      this.router.navigate(['/not-authorized']);",
        "      return false;",
        "    }",
        "  }",
        "}"
      ],
      "references": [
        {
          "title": "Optimizing Angular Route Guards for Performance and Security",
          "url": "https://www.csharp.com/article/optimizing-angular-route-guards-for-performance-and-security/"
        }
      ]
    },
    {
      "name": "Organize Guards in a Dedicated Folder",
      "description": "Maintain a clean project structure by organizing all route guards in a dedicated '_guards' folder, following a consistent naming convention.",
      "code": [
        "src/",
        "  app/",
        "    _guards/",
        "      auth.can-activate.guard.ts",
        "      auth.can-activate-child.guard.ts",
        "      auth.can-load.guard.ts",
        "      auth.can-deactivate.guard.ts",
        "    _guards/index.ts"
      ],
      "references": [
        {
          "title": "Angular Routing — Best Practices for Enterprise Applications",
          "url": "https://medium.com/angular-in-depth/angular-routing-best-practices-for-enterprise-applications-526c603e6513"
        }
      ]
    }
  ]
}