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