Utilizing Angular Guards for Route Navigation Control
Discover how to implement guards to control access and protect routes in your Angular applications effectively.
0 likes
42 views
Rule Content
{ "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" } ] } ] }