mcpField
A
angular-guards

angular-guards

github.com/oguzhan18开发7184 次安装30 周前更新
代码仓库

关于 angular-guards

angular-guards 是面向 Angular 21 开发者的路由守卫参考技能，介绍函数式守卫，以及访问控制、延迟加载、子路由和未保存更改的处理模式。

主要功能

  1. 01设置函数式守卫
  2. 02使用 CanActivate 保护路由
  3. 03保护子路由
  4. 04使用 CanMatch 控制延迟加载
  5. 05有未保存更改时阻止导航
  6. 06通过 provideRouter 注册守卫

适用场景

  1. 01限制未认证用户访问仪表板
  2. 02延迟加载前检查管理员权限
  3. 03保护嵌套的管理路由
  4. 04离开前提示未保存的编辑

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-guards

安装后在 Claude Code 中输入/angular-guards确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

详细介绍

Angular 路由守卫

版本： Angular 21（2025） 标签： 守卫、路由、身份验证、CanActivate

参考： 守卫指南 • CanActivate

API 变更

本节介绍近期特定版本的 API 变更。

  • 新增：函数式守卫 — 使用 CanActivateFn 替代基于类的守卫

  • 新增：CanMatch 守卫 — 防止未授权代码被延迟加载

  • 新增：配合守卫使用 provideRouter — 现代守卫注册方式

  • 已弃用：基于类的守卫 — 迁移到函数式守卫

最佳实践

  • 创建函数式守卫
export const authGuard: CanActivateFn = () => {
  const authService = inject(AuthService);
  const router = inject(Router);
  
  if (authService.isAuthenticated()) {
    return true;
  }
  return router.createUrlTree(['/login']);
};
  • 使用 CanActivate 保护路由
const routes: Routes = [
  {
    path: 'dashboard',
    canActivate: [authGuard],
    component: DashboardComponent
  }
];
  • 对子路由使用 CanActivateChild
export const adminGuard: CanActivateChildFn = () => {
  const auth = inject(AuthService);
  return auth.isAdmin() || inject(Router).createUrlTree(['/unauthorized']);
};

const routes: Routes = [
  {
    path: 'admin',
    canActivateChild: [adminGuard],
    children: [...]
  }
];
  • 使用 CanMatch 实现延迟加载
const routes: Routes = [
  {
    path: 'admin',
    canMatch: [authGuard],
    loadComponent: () => import('./admin/admin.component')
  }
];
  • 使用 CanDeactivate 处理未保存的更改
export const canDeactivateGuard: CanDeactivateFn<CanComponentDeactivate> = (component) => {
  if (component.hasUnsavedChanges?.()) {
    return confirm('You have unsaved changes. Are you sure?');
  }
  return true;
};
  • 使用 withComponentInputBinding
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
};

评论

支持 Markdown