将 CanActivate() 委托给组件答案

【问题标题】：Delegate CanActivate() to Component将 CanActivate() 委托给组件
【发布时间】：2018-01-05 14:26:16
【问题描述】：

我的 angular(4) 应用程序中有数十个组件。

只有拥有访问权限的用户才能访问。

例如，UserA 可以访问 DashboardComponent，但 userB 不能。

部分组件通过参数检查授权。

例如 UserA 可以通过参数 1 访问 VisualizeComponent，但不能通过参数 2 访问。

有多种访问授权或拒绝策略。

所以我想如何将 CanActivate 方法委托给每个组件，因为每个组件都是根据其用途检查访问权限的最佳位置。

我知道人们通常会在下面的服务中实现 CanActivate。

@Injectable()
export class AccessGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot, 
              state: RouterStateSnapshot) {

   route.component.canActivate(route, state); // <----- HERE

   return true;
  }
}

现在我可以在第 6 行调用一些方法吗？我想为我的所有组件实现 CanActivate 并让它们在该方法中拥有自己的保护登录。我也可以轻松地将保护逻辑靠近组件的业务逻辑。

【问题讨论】：

标签： angular angular-routing

【解决方案1】：

尝试添加一些 sessionService ，它必须存储有关负责访问的参数的信息，添加一个有关授予访问逻辑的方法。

添加适当的方法

@Injectable()
export class AccessGuard implements CanActivate { canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
constructor(private sessionService:SessionService) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.sessionService:SessionService.isAuthenticated();
}}}

例如，对于组件和页面添加路由器配置 {path: 'dashboard-page, component: DashboardComponent, canActivate: [AuthenticationGuard]},

希望对你有帮助

【讨论】：

我认为这个答案（即使它确实有效）并没有解释如何将业务逻辑委托给组件。 route.component 似乎是一个函数而不是类本身。