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 }
          ];