AngularJS Blur-Admin模板中基于角色的访问控制 [英] Role Based Access Control in AngularJS Blur-Admin template

问题描述

如何在Blur-Admin模板中为angularJS实施基于角色的访问控制?在哪里定义角色?涉及哪些文件?

How to implement Role Based Access Control in Blur-Admin template for angularJS? Where to define roles? Which files are concerned?

推荐答案

完美且有效的解决方案！该解决方案基本上提供了对该组件允许的角色的受限访问.

在所有 主模块 中定义 params -(例如)-

(function() {
  'use strict';

  angular.module('BlurAdmin.pages.components', [
      'BlurAdmin.pages.components.mail',
      // 'BlurAdmin.pages.components.timeline',
      // 'BlurAdmin.pages.components.tree',
      // 'BlurAdmin.pages.components.fileUpload',
    ])
    .config(routeConfig);

  /** @ngInject */
  function routeConfig($stateProvider) {
    $stateProvider
      .state('main.components', {
        url: '/components',
        template: '<ui-view  autoscroll="true" autoscroll-body-top></ui-view>',
        abstract: true,
        title: 'Components',
        sidebarMeta: {
          icon: 'ion-gear-a',
          order: 100,
        },
        authenticate: true,
        params: {                // <-- focusing this one
          authRoles: ['admin']   // <-- roles allowed for this module
        }
      });
  }
})();

修改 baSidebar.service.js ，在 getMenuItems 下方添加一个新函数 getAuthorizedMenuItems (为便于理解)).然后只需在 defineMenuItemStates()中添加一个参数 authRoles .

Modify baSidebar.service.js, add a new function getAuthorizedMenuItems just below getMenuItems (for easy understanding). And then just add a single parameter authRoles in defineMenuItemStates().

因此， getAuthorizedMenuItems()将包含以下代码-

So, getAuthorizedMenuItems() will contain following code -

this.getAuthorizedMenuItems = function(user) {
    var states = defineMenuItemStates();
    var menuItems = states.filter(function(item) {
        return item.level == 0 && _.includes(item.authRoles, user.role);
    });

    menuItems.forEach(function(item) {
        var children = states.filter(function(child) {
            return child.level == 1 && child.name.indexOf(item.name) === 0;
        });
        item.subMenu = children.length ? children : null;
    });

    return menuItems.concat(staticMenuItems);
};

更新后的 defineMenuItemStates()将为-

function defineMenuItemStates() {
    return $state.get()
        .filter(function(s) {
            return s.sidebarMeta;
        })
        .map(function(s) {
            var meta = s.sidebarMeta;
            return {
                name: s.name,
                title: s.title,
                level: ((s.name.match(/\./g) || []).length - 1),
                order: meta.order,
                icon: meta.icon,
                stateRef: s.name,
                authRoles: s.params ? s.params.authRoles : undefined        // <-- added this
            };
        })
        .sort(function(a, b) {
            return (a.level - b.level) * 100 + a.order - b.order;
        });
}

现在，是时候在 BaSidebarCtrl.js 中使用新添加的方法 getAuthorizedMenuItems .用这种方式-

// FYI, I got userCreds in BaSidebarCtrl as following -
var userCreds = localStorage.getObject('dataUser');
// note that getMenuItems is just replaced with getAuthorizedMenuItems(userCreds)
// $scope.menuItems = baSidebarService.getMenuItems();
$scope.menuItems = baSidebarService.getAuthorizedMenuItems(userCreds);

因此，您的用户对象将看起来像这样-

var userCreds = {
    userName: '[e-mail]',
    passWord: 'testpwd',
    role: 'admin'
};

就是这样！

这篇关于AngularJS Blur-Admin模板中基于角色的访问控制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！