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

Question

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

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

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

每个组件都有一个公共(public)基类可行吗？ (关于如何做到这一点的任何例子？)。我们可以自定义 @CanActivate()，比如 @ProtectMyApp() 吗？ (例子？)

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

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

谢谢

Answer 1

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

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

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

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

}

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

更新

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

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

The injector provided DynamicComponentLoader.

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

在你的启动文件中

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();
}