angular 路由守卫

路由守卫基础

路由守卫作用：
    用于在导航到目标组件之前进行验证， 符合条件才会导航到目标组件。
路由检查的顺序：
    路由器会先按照从最深的子路由由下往上检查的顺序来检查 CanDeactivate() 和 CanActivateChild() 守卫。
  然后它会按照从上到下的顺序检查 CanActivate() 守卫。 如果特性模块是异步加载的，在加载它之前还会检查 CanLoad() 守卫。
  如果任何一个守卫返回 false，其它尚未完成的守卫会被取消，整个导航就被取消。
  
惰性加载：
    1. 只在用户请求时才加载。惰性加载和重新配置工作只会发生一次，也就是在该路由首次被请求时。在后续的请求中，该模块和路由都是立即可用的。
    2. 必须在启动时加载的模块，其他模块都应该惰性加载。
预加载：
    1. 根据预加载策略，在每次成功的导航后，路由器会在自己的配置中查找尚未加载并且可以预加载的模块进行加载。
    2. 当前不需要但是随后马上就需要的模块应该预加载

（守卫接口）Guard interfaces

1. CanActivate 和 CanActivateChild

   CanActivate：处理导航到某路由的情况。

   CanActivateChild：处理导航到某子路由的情况。

   使用方法：

   const adminRoutes: Routes = [
        {
          path: '',
          component: AdminComponent,
          canActivate: [AuthGuard],//AuthGuard验证通过，才允许访问Admin页面
          children: [
            {
              path: '',
              canActivateChild: [AuthGuard],//AuthGuard验证通过，才允许访问Admin页面的子页面
              children: [
                { path: 'crises', component: ManageCrisesComponent },
                { path: 'heroes', component: ManageHeroesComponent },
                { path: '', component: AdminDashboardComponent }
              ]
            }
          ]
        }
      ];

   应用示例：要求认证

   

   工作流程：

   

2. CanDeactivate 和 Resolve

   CanDeactivate：处理从当前路由离开的情况。

   Resolve：在路由激活之前获取路由数据

   使用方法：

   const crisisCenterRoutes: Routes = [
        {
          path: '',
          component: CrisisCenterComponent,
          children: [
            {
              path: '',
              component: CrisisListComponent,
              children: [
                {
                  path: ':id',
                  component: CrisisDetailComponent,
                  canDeactivate: [CanDeactivateGuard],  // CanDeactivate：处理从CrisisDetailComponent路由离开的情况
                  resolve: { //resolve：当所有必要数据都已经拿到之后，预先加载CrisisDetailComponent的路由数据
                    crisis: CrisisDetailResolverService 
                  }
                },
                {
                  path: '',
                  component: CrisisCenterHomeComponent
                }
              ]
            }
          ]
        }
      ];

   应用示例：用户尝试不保存或撤销更改就导航到外面。

   

   工作流程：

   

3. CanLoad

   CanLoad:处理异步导航到某特性模块的情况。
      使用方法：
          const appRoutes: Routes = [
            {
              path: 'compose',
              component: ComposeMessageComponent,
              outlet: 'popup'
            },
            {
              path: 'admin',
              loadChildren: './admin/admin.module#AdminModule',
              canLoad: [AuthGuard]//保护对特性模块的未授权加载，只有在用户已登录的情况下才加载 AdminModule
            },
            {
              path: 'crisis-center',
              loadChildren: './crisis-center/crisis-center.module#CrisisCenterModule',
              data: { preload: true }
            },
            { path: '',   redirectTo: '/superheroes', pathMatch: 'full' },
            { path: '**', component: PageNotFoundComponent }
          ];