angular 路由守衛

• 創建路由守衛

  • 創建路由(CanActivate、CanActivateChild、CanDeactivate)守衛的命令為:

    ng generate guard auth/auth（自定義）
    

  • 創建Resolve守衛的方式有些許不同。這個要用在一個服務中繼承

  1、ng generate service test-resolve
  2、在生成的服務繼承Resolve<T>方法，並實現。其中Person是一個類
  export class TestResolverService implements Resolve<Person> {
    constructor() { }
    resolve(route: import("@angular/router").ActivatedRouteSnapshot, state: import("@angular/router").RouterStateSnapshot):Observable<Person>{
      let p = new Person() 
      // let p:Person只是聲明一個變量而已，不是定義一個變量
      p.age="sdfsdfdsdsfsad"
      p.name="fsdfsd"
      return of(p)
    }
  }
  

• 路由守衛的使用

  • 在使用ng generate guard auth/auth在創建守衛的時候，會出現選擇實現那種守衛方式的選項，按需要選者即可

  • 在auth.guard.ts中實現CanActivate,CanActivateChild

    export class AuthGuard implements CanActivate,CanActivateChild{
    
      constructor(
        private authServic:AuthService,
        private router:Router
      ){}
      canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): boolean{
        let url:string = state.url  //在跳轉的時候獲取
        console.log("URL:",url)
        return this.checkLogin(url);
      }
    
      checkLogin(url:string):boolean{
         // this.authServic.isLoggedIn是Boolean類型的變量
        if(this.authServic.isLoggedIn){
          return true;
        }
        console.log("checkLogin",url)
        this.router.navigate(["/login"])
        return false
      }
    
      // 子路由，用來控制子路由的被訪問權限
      canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot):boolean{
        // 都只是簡單的進行判斷是否登錄，登錄之后就不會重定向到login頁面
        return this.canActivate(childRoute,state)
      }  
    }
    

  • 在相對應的路由中使用。使用不同的路由守衛，在路由數組中使用不同的key進行區分(canActivate和canActivateChild)

    const routes: Routes = [
      {
        path:'admin',
        component:AdminComponent,
        canActivate:[AuthGuard],
        children:[
          {
            path:'',
            canActivateChild:[AuthGuard],
            children:[
              { path: 'crises', component: ManageCrisesComponent},
              { path: 'heroes', component: ManageHeroesComponent},
              { path: '', component: AdminDashboradComponent } 
            ]
          }
        ]
      }
    ];
    

  • 使用canDeactivate守衛，有些特殊。實例化的該方法的方法如下所示

    export class CanDeactivateGuard implements CanDeactivate<TestComponent>  {
        //CanDeactivate<T>其中T是個泛型
      canDeactivate(component: TestComponent,
         currentRoute: ActivatedRouteSnapshot, 
         currentState: RouterStateSnapshot, 
         nextState?: RouterStateSnapshot): boolean{
        return window.confirm("sdfsdfsadfsda")
      }
    }
    

  • 在路由中使用的方法於之前的類似

    const routes: Routes = [
      {
        path:'admin',
        component:AdminComponent,
        children:[
          {
            path:'',
            canActivateChild:[AuthGuard],
            children:[
              { path: 'crises', component: ManageCrisesComponent,canDeactivate:[CanDeactivateGuard] },
              { path: 'heroes', component: ManageHeroesComponent},
              { path: '', component: AdminDashboradComponent } 
            ]
          }
        ]
      }
    ];
    

  • 實例化resolve守衛。

    export class TestResolverService implements Resolve<Person> {
      constructor() { }
      resolve(route: import("@angular/router").ActivatedRouteSnapshot, state: import("@angular/router").RouterStateSnapshot):Observable<Person>{
        let p = new Person() 
        // let p:Person只是聲明一個變量而已，不是定義一個變量
        p.age="sdfsdfdsdsfsad"
        p.name="fsdfsd"
        return of(p)
      }
    }
    

  • resolve守衛的使用

    const routes: Routes = [
      {
        path:'admin',
        component:AdminComponent,
        children:[
          {
            path:'',
            children:[
              { path: 'crises', component: ManageCrisesComponent},
              { path: 'heroes', component: ManageHeroesComponent,resolve:{person:TestResolverService}},  //person的標識符可以是任意符合標識符的字符串，但一般都是於該路由發送的類型名字一致的字符串
              { path: '', component: AdminDashboradComponent } 
            ]
          }
        ]
      }
    ];
    

• 實現路由守衛的原理（CanActivate，CanActivateChild，CanDeactivate）

  • 守衛返回一個值，以控制路由器的行為
    • 如果它返回true，導航過程會繼續
    • 如果他返回false，導航過程就會終止，且用戶留在原地
    • 如果他返回UrlTree，則取消當前的導航，並且開始導航到返回的這個UrlTree中

• 各個路由使用的大致場景

  • CanActivate：檢查是否是登錄狀態訪問頁面；檢查當前登錄的用戶是否權限訪問這個頁面(實現多角色多問題訪問)
  • CanActivateChild：同上
  • CanDeactivate：當離開頁面時候，修改了什么東西的時候，對用戶進行訪問是否保存
  • Resolve：在跳轉到另一個頁面的時候，先獲取該頁面需要的所有的值