路由 - 路由守卫 - 《【前端】Angular》

Resolve预先获取数据
CanDeactivate
CanActive
CanActivateChild：保护子路由

在分层路由的每个级别上，你都可以设置多个守卫。路由器会先按照从最深的子路由由下往上检查的顺序来检查 [CanDeactivate](https://angular.cn/api/router/CanDeactivate)() 和 [CanActivateChild](https://angular.cn/api/router/CanActivateChild)() 守卫。然后它会按照从上到下的顺序检查 [CanActivate](https://angular.cn/api/router/CanActivate)() 守卫。如果特性模块是异步加载的，在加载它之前还会检查 [CanLoad](https://angular.cn/api/router/CanLoad)() 守卫。如果任何一个守卫返回 false，其它尚未完成的守卫会被取消。

Resolve预先获取数据

该方法可以返回一个 Promise、一个 Observable 来支持异步方式，或者直接返回一个值来支持同步方式。
你希望的是只有当所有必要数据都已经拿到之后，才渲染这个路由组件。

路由器的这个 [Resolve](https://angular.cn/api/router/Resolve) 接口是可选的。CrisisDetailResolverService 没有继承自某个基类。路由器只要找到了这个方法，就会调用它。

要依赖路由器调用此守卫。不必关心用户用哪种方式导航离开，这是路由器的工作。你只要写出这个类，等路由器从那里取出它就可以了。

Resolve服务

export class CrisisDetailResolverService implements Resolve<Crisis> {
constructor(private cs: CrisisService, private router: Router) {}
 // 该方法可以返回一个 Promise、一个 Observable 来支持异步方式，或者直接返回一个值来支持同步方式。
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Crisis> | Observable<never> {
 let id = route.paramMap.get('id');
 return this.cs.getCrisis(id).pipe(
   take(1),
   mergeMap(crisis => {
     if (crisis) {
       return of(crisis);
     } else { // id not found
       this.router.navigate(['/crisis-center']);
       return EMPTY;  // 注意 EMPTY: Observable<never>
     }
   })
 );
}
}

RoutingModule中resolve选项

const crisisCenterRoutes: Routes = [
{
 path: 'crisis-center',
 component: CrisisCenterComponent,
 children: [
   {
     path: '',
     component: CrisisListComponent,
     children: [
       {
         path: ':id',
         component: CrisisDetailComponent,
         canDeactivate: [CanDeactivateGuard],
         resolve: {
           crisis: CrisisDetailResolverService
         }
       }
     ]
   }
 ]
}
];

组件中订阅ActivateRoute.data

ngOnInit() {
this.route.data  // activateRoute.data: 解析守卫（resolve guard）解析而来的值。
 .subscribe((data: { crisis: Crisis }) => {
   this.editName = data.crisis.name;
   this.crisis = data.crisis;
 });
}

CanDeactivate

创建了一个 Guard，它将检查这个（任意）组件中是否有 [canDeactivate](https://angular.cn/api/router/Route#canDeactivate)() 函数

通用guard，它将检查任意组件中是否有 [canDeactivate](https://angular.cn/api/router/Route#canDeactivate)() 函数
只想为这个组件使用该守卫，并且需要获取该组件属性或确认路由器是否允许从该组件导航出去时

应用：表单录入

export interface CanComponentDeactivate {
 canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate) {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

CanActive

无组件路由

一个无组件的路由能让守卫子路由变得更容易。
这里的目标是对 admin 路径下的 危机中心 管理类路由进行分组，但并不需要另一个仅用来分组路由的组件。
同样把这个 AuthGuard 添加到“无组件的”管理路由，来同时保护它的所有子路由，而不是为每个路由单独添加这个 AuthGuard。

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

export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    let url: string = state.url;
    return this.checkLogin(url);
  }
  checkLogin(url: string): boolean {
    if (this.authService.isLoggedIn) { return true; }
    // Store the attempted URL for redirecting
    this.authService.redirectUrl = url;
    // Navigate to the login page with extras
    this.router.navigate(['/login']);
    return false;
  }
}

router.parseUrl

// Get the redirect URL from our auth service
// If no redirect has been set, use the default
let redirect = this.authService.redirectUrl ? this.router.parseUrl(this.authService.redirectUrl) : '/admin';

多个守卫

无法实现前一个路由返回false后，不执行后面的路由
github issue 已关闭
hack 方式，包装为一个路由：

import {Injectable, Injector}                                              from "@angular/core";
import {ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree} from "@angular/router";
@Injectable()
export class AllGuard implements CanActivate {
    constructor(private injector: Injector) {
    }
    async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean | UrlTree> {
        let guards = route.data.guards || [];
        for (let guard of guards) {
            let instance: CanActivate = this.injector.get(guard);
            let result                = await instance.canActivate(route, state);
            if (result === false || result instanceof UrlTree) {
                return result;
            }
        }
        return true;
    }
}

@NgModule({
    imports: [
        SomeOtherModule,
        RouterModule.forRoot([
             { path: '', data: {guards: [SomeGuard]}, canActivate: [AllGuard]
         ])
    ],
    providers: [AllGuard]
})
export class SomeModule {}

CanActivateChild：保护子路由

[CanActivateChild](https://angular.cn/api/router/CanActivateChild) 会在任何子路由被激活之前运行。
扩展 AuthGuard 以便在 admin 路由之间导航时提供保护。