Angular路由里的canActivate用法

看个具体的例子。

const CUSTOM_ROUTES: Routes = [
  { path: "custom/:id", 
    component: RouteDemoComponent,
    data:{ name: 'jerry'},
    canActivate: [CanActivateTeam] 
  }
];

canActivate的类型是数组，而不是单个元素。

在app.module.ts的providers里，导入CanActivateTeam:

canActivateTeam的实现：

@Injectable()
export class CanActivateTeam implements CanActivate {
  constructor(private permissions: JerryPermissions, private currentUser: UserToken) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {
    return this.permissions.canActivate(this.currentUser, route.params.id);
  }
}

permissions的实现：

export class UserToken {}
export class JerryPermissions {
  canActivate(user: UserToken, id: string): boolean {
      console.log('Jerry');
    return true;
  }
}

运行时数据：

大部分字段的值都是从Route interface里带过来的。

使用依赖注入获得CanActivateTeam的实例：

根据token，对实例进行hydrate：

record里包含了Component 工厂：

依赖注入完成：

更多Jerry的原创文章，尽在：“汪子熙”: