保护多个 Angular 2 组件的好方法

Question

保护 Angular 2 组件/路由的常用推荐方法似乎是使用@CanActivate()，如下所示：

http://youknowriad.github.io/angular2-cookbooks/stateless-authentication.html

如果您只有几个组件，这可以正常工作，但是有没有更好的方法可以集中所有这些？

每个组件都有一个通用的基类会起作用吗？ （有关如何执行此操作的任何示例？）。我们可以定制一个@CanActivate()，比如@ProtectMyApp()吗？ （例子？）

我基本上是想避免为每个组件复制+粘贴相同的@CanActivate() 代码。

（抱歉，如果这些问题没有意义，仍在学习 Angular）

谢谢

Answer 1

您可以创建一个全局回调，将其传递给@CanActivate 装饰器：

export function isAllowed(): boolean | Promise<boolean>{
    // Permission logic here
}

然后你可以将该函数传递给装饰器

@Component({...})
@CanActivate(isAllowed)
export class MyComponent{

}

这将为您提供验证权限的全局来源，但仍使用内置方法。

更新

这未经测试，但可能适用于将服务注入isAllowed

在文档中，我发现bootstrap 方法返回一个ComponentRef，它的injector 属性在文档中有以下注释

注入器提供 DynamicComponentLoader。

这可能是获取应用程序的主注入器使用的相同单例实例的黄金票。理论上这应该可行

在你的启动文件中

export var applicationInjector: Injector;
bootstrap(AppComponent, [MyService, ...]).then((ref: ComponentRef) => {
    applicationInjector = ref.injector;
});

然后在文件中使用您的 isAllowed 方法

import {applicationInjector} from '...';

export function isAllowed(): boolean | Promise<boolean>{
    let myService: MyService = applicationInjector.get(MyService);
    return myService.isAllowed();
}