Loading...
Loading...
ALWAYS use when working with Angular Route Guards, CanActivate, CanDeactivate, CanLoad, or route protection in Angular applications.
npx skill4agent add oguzhan18/angular-ecosystem-skills angular-guardsCanActivateFnexport const authGuard: CanActivateFn = () => {
const authService = inject(AuthService);
const router = inject(Router);
if (authService.isAuthenticated()) {
return true;
}
return router.createUrlTree(['/login']);
};const routes: Routes = [
{
path: 'dashboard',
canActivate: [authGuard],
component: DashboardComponent
}
];export const adminGuard: CanActivateChildFn = () => {
const auth = inject(AuthService);
return auth.isAdmin() || inject(Router).createUrlTree(['/unauthorized']);
};
const routes: Routes = [
{
path: 'admin',
canActivateChild: [adminGuard],
children: [...]
}
];const routes: Routes = [
{
path: 'admin',
canMatch: [authGuard],
loadComponent: () => import('./admin/admin.component')
}
];export const canDeactivateGuard: CanDeactivateFn<CanComponentDeactivate> = (component) => {
if (component.hasUnsavedChanges?.()) {
return confirm('You have unsaved changes. Are you sure?');
}
return true;
};export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes, withComponentInputBinding())
]
};const routes: Routes = [
{
path: 'admin',
canActivate: [authGuard, adminGuard],
loadComponent: () => import('./admin/admin.component')
}
];const routes: Routes = [
{
path: 'user/:id',
canActivate: [userGuard],
data: { requiredRole: 'admin' }
}
];
export const userGuard: CanActivateFn = (route, state) => {
const requiredRole = route.data['requiredRole'];
// Check role
};