angular-acl, 基于角色的AngularJS权限

分享于 

12分钟阅读

GitHub

  繁體 雙語
Role-based permissions for AngularJS
  • 源代码名称:angular-acl
  • 源代码网址:http://www.github.com/mikemclin/angular-acl
  • angular-acl源代码文档
  • angular-acl源代码下载
  • Git URL:
    git://www.github.com/mikemclin/angular-acl.git
    Git Clone代码到本地:
    git clone http://www.github.com/mikemclin/angular-acl
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/mikemclin/angular-acl
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    Angular ACL

    Build StatusCoverage Status

    基于 Angular ACL ( 访问控制列表) 是一种允许你基于当前分配的用户 role(s), 和这些角色权限( 能力) 来保护/显示内容的服务。 因此,如果当前用户具有"主持人"角色,而主持人可以"ban_users",则当前用户可以进行"ban_users"。

    常用用途包括:

    • 基于角色/权限操作模板
    • 防止用户不应该看到的路由

    这是多么安全?

    acl中的一个很好的类比就是在JavaScript中进行验证。 表单验证一样,在acl中,浏览器也可以被篡改。 不过,就像表单验证一样,acl确实有用,为用户和开发人员提供更好的体验。 请记住,任何敏感数据或者操作的收费都需要服务器( 或者类似的) 作为 final 权限表。

    示例篡改方案

    当前用户具有"来宾"的角色。 来宾无法进行"create_users"操作。 然而,这个狡猾的来宾足够聪明,可以篡改系统并给自己提供特权。 现在,来宾已经在"创建用户"页面,并提交表单。 表单数据发送到服务器,用户受到"拒绝访问"的邀请: 由于服务器还检查了以确保用户拥有正确的权限,所以未授权的"消息"。

    任何敏感数据或者操作都应该像下面这样集成服务器检查。

    基本示例

    设置数据

    AclService 设置为模块模块中的run()

    app.run(['AclService', function (AclService) {
     // Set the ACL data. Normally, you'd fetch this from an API or something.// The data should have the roles as the property names,// with arrays listing their permissions as their value.var aclData = {
     guest: ['login'],
     member: ['logout', 'view_content'],
     admin: ['logout', 'view_content', 'manage_content']
     }
     AclService.setAbilities(aclData);
     // Attach the member role to the current userAclService.attachRole('member');
    }]);

    保护路由

    如果当前用户尝试转到 /manage 路由,它们将被重定向,因为当前用户是 membermanage_content 不是成员能力。

    但是,当用户转到 /content 时,路由将正常工作,因为用户拥有权限。 如果用户不是 member,但是一个 guest,那么根据上面设置的数据,它们就无法看到 content 路由。

    app.config(['$routeProvider', function ($routeProvider) {
     $routeProvider
    . when('/manage', {
     resolve : {
     'acl': ['$q', 'AclService', function($q, AclService){
     if(AclService.can('manage_content')){
     // Has proper permissionsreturntrue;
     } else {
     // Does not have permissionreturn$q.reject('Unauthorized');
     }
     }]
     }
     });
    . when('/content', {
     resolve : {
     'acl': ['$q', 'AclService', function($q, AclService){
     if(AclService.can('view_content')){
     // Has proper permissionsreturntrue;
     } else {
     // Does not have permissionreturn$q.reject('Unauthorized');
     }
     }]
     }
     });
    }]);app.run(['$rootScope', '$location', function ($rootScope, $location) {
     // If the route change failed due to our"Unauthorized" error, redirect them$rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
     if(rejection ==='Unauthorized'){
     $location.path('/');
     }
     })
    }]);

    操作模板

    因为当前用户是 member,而 manage_content 不是角色的成员能力,所以模板 below 中的编辑链接不会显示。

    控制器
    app.controller('DemoCtrl', ['$scope', 'AclService', function ($scope, AclService) {
     $scope.can=AclService.can;
     $scope.id=22;
     $scope.title='My Demo Title';
    }]);
    模板
    <h1>{{ title }}</h1>
    <ang-href="edit/{{ id }}"ng-show="can('manage_content')">Edit</a>

    安装

    使用 bower 安装:

    bower install angular-acl

    <script> 添加到你的index.html:

    <scriptsrc="/bower_components/angular-acl/angular-acl.js"></script>

    添加 mm.acl 作为你的应用程序的依赖项:

    angular.module('myApp', ['mm.acl']);

    文档

    配置

    可以通过在 Angular 配置阶段使用 AclServiceProviderconfig() 方法在配置阶段中扩展配置来修改配置。

    app.config(['AclServiceProvider', function (AclServiceProvider) {
     var myConfig = {
     storage:'localStorage',
     storageKey:'AppAcl' };
     AclServiceProvider.config(myConfig);
    }]);
    配置选项属性默认描述
    storage"sessionStorage""sessionStorage""localStorage"false。 希望保留ACL数据的位置。 如果你不想使用网络存储,那么你可以传递一个值,然后在下一个页面刷新 ( 下一次 Angular 应用程序必须 Bootstrap )。
    storageKey"AclService"将数据存储在网络存储中时将使用的密钥

    public-方法

    AclService.resume()

    从网络存储还原数据。

    返回

    如果存在网络存储,则为 boolean如果不存在,则为 false

    示例用法
    app.run(['AclService', function (AclService) {
     // Attempt to load from web storageif (!AclService.resume()) {
     // Web storage record did not exist, we'll have to build it from scratch// Get the user role, and add it to AclServicevar userRole =fetchUserRoleFromSomewhere();
     AclService.addRole(userRole);
     // Get ACL data, and add it to AclServicevar aclData =fetchAclFromSomewhere();
     AclService.setAbilities(aclData);
     }
    }]);

    如果你需要应用程序加载应用程序 Bootstrap 过程( 比如 process ) 之前的web存储中的ACL数据,那么你还可以在 config 阶段运行 resume()。 在 $routeProvider 解析第一条路由之前。

    app.config(['AclServiceProvider', function (AclServiceProvider) {
     AclServiceProvider.resume();
    }]);
    AclService.flushStorage()

    删除网络存储中的所有数据。

    AclService.attachRole(role)

    将角色附加到当前用户。 用户可以具有多个角色。

    参数参数类型示例
    role字符串"admin"角色标签
    AclService.detachRole(role)

    从当前用户中删除角色

    参数参数类型示例
    role字符串"admin"角色标签
    AclService.flushRoles()

    删除当前用户的所有角色

    AclService.getRoles()

    获取附加到用户的所有角色

    返回

    数组

    AclService.hasRole(role)

    检查当前用户是否已经附加角色。 如果给定了 array,则必须附加所有角色。 要检查 array 中是否有任何角色被附加,请查看 hasAnyRole() 方法。

    参数参数类型示例
    role字符串/数组"admin"角色标签,或者角色标签的array
    返回 AclService.hasAnyRole(roles)

    检查当前用户是否已经附加任何给定的角色。 若要检查 array 中的所有角色是否都已经附加,请参见 hasRole() 方法。

    参数参数类型示例
    roles数组["admin","user"]角色标签数组
    返回 AclService.setAbilities(abilities)

    设置能力对象(。覆盖以前的功能)。

    参数参数类型详细信息
    abilities对象能力对象上的每个属性都应该是一个角色。 每个角色都应该有一个 array 值。 array 应该包含角色的所有能力的列表。
    示例
    var abilities = {
     guest: ['login'],
     user: ['logout', 'view_content'],
     admin: ['logout', 'view_content', 'manage_content']
    }AclService.setAbilities(abilities);
    AclService.addAbility(role, ability)

    添加角色的能力

    参数参数类型示例
    role字符串"admin"角色标签
    ability字符串"create_users"能力/权限标签
    AclService.can(ability)

    当前用户是否具有执行给定功能的权限?

    返回 示例
    // Setup some abilitiesAclService.addAbility('moderator', 'ban_users');AclService.addAbility('admin', 'create_users');// Add moderator role to the current userAclService.attachRole('moderator');// Check if the current user has these permissionsAclService.can('ban_users'); // returns trueAclService.can('create_users'); // returns false

    指令

    aclShow

    显示和元素如果 truthy,则隐藏它。

    示例用法

    只有用户拥有 edit_posts 权限才能看到按钮。

    <buttonacl-show="edit_posts">Edit Post</button>

    这本质上是一个快捷方式,而不必像这样键入一个 ngShow

    <buttonng-show="$ctrl.AclService.can('edit_posts')">Edit Post</button>

    许可证

    麻省理工学院许可证

    Angular ACL版权( c ) 2016 Mike McLin

    若要在取得该软件副本时免费授予任何人,如有下列条件的软件,请免费授予该软件的副本,并与相关的文档文件("软件") 进行许可,包括不受限制的权利,包括以下条件: 上述版权声明和本许可声明须包括在所有的副本或实质性部分的软件。

    软件是"是",没有任何保证,表示或者隐含,包括但不限于销售,适合特定用途和 NONINFRINGEMENT。 作者或者版权持有人在合同。侵权或者它的他与软件或者它的他用户交易的行为。


    相关文章