Question

很清楚如何在客户端 - 路由器级别上组织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

Answer 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可以更改为返回值而不是promise。

用法是

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

AngularJS ACL视图级别示例

1 个答案: