AngularJS ACL 视图级别示例

Question

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

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

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

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

...

相关的 Whosebug 链接：

What is the best way to create AngularJS ACL?

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

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

Answer 1

声明式编程可能适用于简单的事情，但对于应用程序设计而言，这将是一种倒退。在根作用域上使用全局 ACL state/method (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 可以更改为 return 一个值而不是一个承诺。

而用法是

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

AngularJS ACL 视图级别示例

AngularJS ACL view level examples

angularjs

acl