为何 @angular/router 会设计 CanActivate 和 CanActivateChild 两个 guard?

问题描述

我们知道,@angular/router 提供了 RouteGuard 用来做路由导航权限控制功能,并提供了 CanActivate 和 CanActivateChild 两种 guard,使用方式如:

routes = [
    {
        path: 'advisors/:id',
        component: AdvisorComponent,
        canActivate: [AuthGuard], // AuthGuard 判断用户是否登录
        canActivateChild: [AuthGuard], // 是否注释
        children: [
            {
                path: 'households/:id',
                component: HouseholdComponent,
                // canActivate: [AuthGuard],
            },
            {
                path: 'contacts',
                component: ContactComponent,
                // canActivate: [AuthGuard],
            }
        ]
    }
];

这样,当从 route1 advisors/1/households/1 切换为 route2 advisors/1/households/2 时,还会执行 AuthGuard 来判断用户是否登录,否则导航失败。如果注释掉 canActivateChild: [AuthGuard],从 route1 切换到 route2 后,是不会运行 AuthGuard,因为 @angular/router 的 canActivate 被设计成只负责当前段(segment),只负责局部而不是全局(或者在每一个子段加上 canActivate: [AuthGuard])。
当然,route1 切换到 route2 肯定还是得运行 AuthGuard 来判断用户是否登录的。

几个问题

  1. 这种 canActivate 只负责当前段(segment)的设计会让代码有重复之嫌,为什么不设计成当 route1 切换到 route2 时,还是会执行父段 canActivate 中的 AuthGuard?这个设计有什么特别的理由吗?
  2. Router 在 run guard 的内部详细过程是什么?(承认这个问题有点过大和宽泛)
阅读 3.6k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进