AngularJS ACL 视图级别示例

【问题标题】：AngularJS ACL view level examplesAngularJS ACL 视图级别示例
【发布时间】：2016-02-25 05:54:57
【问题描述】：

如何在客户端-路由器级别组织 ACL 以防止对某些状态的访问很清楚，如何在 API 端进行也非常简单。

但是您可以推荐使用 View 层做什么？我们想根据权限隐藏和显示一些小部件。应该只是 ng-if 吗？喜欢：

<widget ng-if="can('admin', 'mainWidget')"></widget>

或者您可能会建议更复杂的解决方案？

...

相关的stackoverflow链接：

Bullet-Proof ACL using AngularJS

What is the best way to create AngularJS ACL?

现成的解决方案（但不合我的口味）：

https://github.com/mikemclin/angular-acl

【问题讨论】：

标签： angularjs acl

【解决方案1】：

声明式编程可能适用于简单的事情，但对于应用程序设计，这将是一个退步。在根作用域上使用全局 ACL 状态/方法 (can()) 会强制应用将其暴露给任何地方的作用域。

app.directive('acl', (auth) => ({
  scope: {
    aclRole: '@',
    aclRule: '@'
  },
  transclude: true,
  template: '<div ng-transclude ng-if="auth"></div>',
  link: (scope) => {
    scope.$watchCollection(['aclRole', 'aclRule'], () => {
      auth.can(scope.aclRole, scope.aclRule).then((can) => scope.auth = can);
    })
  }
}));

对于同步 ACL（在路由解析器中已解析的情况下）auth.can 可以更改为返回值而不是承诺。

而用法是

<acl acl-role="admin" acl-rule="mainWidget">...</acl>

【讨论】：

看来这是唯一的答案，所以我将其标记为正确:)