Route Guard Pattern

Question

Route Guard Pattern

Accepted Answer

The Route Guard pattern is a behavioral pattern that protects routes from unauthorized access by checking conditions before navigation completes. This pattern is essential for implementing authentication flows, permission-based routing, and preventing navigation until required data is loaded. While most prominent in Angular (CanActivate, CanLoad, CanDeactivate), similar patterns exist in React with custom route components and React Router's loader/action functions. // Higher-order component route guard const withAuth = (Component) => { return (props) => { const isAuthenticated = useSelector(state => state.auth.isAuthenticated); const location = useLocation(); if (!isAuthenticated) { return ; } return ; }; }; // Protected route component function PrivateRoute({ children, requiredRoles }) { const { user, isAuthenticated } = useAuth(); const location = useLocation(); if (!isAuthenticated) { return ; } if (requiredRoles && !requiredRoles.some(role => user.roles.includes(role))) { return ; } return children; } // Data loading guard function DataGuard({ children, loadData }) { const { data, loading, error, load } = useDataLoader(); const location = useLocation(); useEffect(() => { if (!data && !loading) { load(); } }, []); if (loading) return ; if (error) return ; if (!data) return null; return children; } // React Router v6 loader (route guard pattern) const router = createBrowserRouter([ { path: '/dashboard', element: , loader: async () => { const user = await authService.getCurrentUser(); if (!user) throw redirect('/login'); return { user }; }, shouldRevalidate: ({ currentUrl, nextUrl }) => currentUrl.pathname !== nextUrl.pathname } ]); // Route guard composition function App() { return ( }> } /> }> } /> }> } /> ); } @Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate { constructor(private authService: AuthService, private router: Router) {} canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree { const isAuthenticated = this.authService.isAuthenticated(); if (isAuthenticated) { return true; } return this.router.createUrlTree(['/login'], { queryParams: { returnUrl: state.url } }); } } @Injectable({ providedIn: 'root' }) export class RoleGuard implements CanActivate { constructor(private authService: AuthService) {} canActivate(route: ActivatedRouteSnapshot): boolean { const requiredRoles = route.data['roles']; const userRoles = this.authService.getUserRoles(); return requiredRoles.some(role => userRoles.includes(role)); } } @Injectable({ providedIn: 'root' }) export class DataGuard implements CanActivate, CanDeactivate { canActivate(): boolean { // Load required data before activating route return this.dataService.loadData().toPromise().then(() => true); } canDeactivate(component: FormComponent): boolean { if (component.form.dirty) { return confirm('You have unsaved changes. Do you want to leave?'); } return true; } } @Injectable({ providedIn: 'root' }) export class PermissionGuard implements CanLoad { canLoad(route: Route): boolean { const requiredPermission = route.data['permission']; return this.authService.hasPermission(requiredPermission); } } // Route configuration const routes: Routes = [ { path: 'admin', canActivate: [AuthGuard, RoleGuard], data: { roles: ['admin'] }, children: [ { path: 'settings', component: SettingsComponent, canDeactivate: [DataGuard], resolve: { settings: SettingsResolver } } ] }, { path: 'reports', canLoad: [PermissionGuard], data: { permission: 'read_reports' }, loadChildren: () => import('./reports/reports.module').then(m => m.ReportsModule) } ];

Route Guard Pattern

The Route Guard pattern controls navigation access based on conditions, intercepting route activation to check authentication, authorization, or data loading before allowing navigation.

Route Guard Pattern

The Route Guard pattern controls navigation access based on conditions, intercepting route activation to check authentication, authorization, or data loading before allowing navigation.

Scenario Questions

Follow-up Questions