AngularJS中基於角色的訪問控制Blur-Admin模板

Question

如何實現基於角色的訪問控制 in Blur-Admin template for angularJS？在哪裏定義角色？涉及哪些文件？

Answer 1

完美的工作解決方案！該解決方案基本上提供了對該組件允許的角色的受限訪問。 （例如） - -

所有以這種方式你主要模塊定義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，加新功能getAuthorizedMenuItems正好低於getMenuItems（爲了便於理解）。然後只需在defineMenuItemStates()中添加一個參數authRoles。

所以，getAuthorizedMenuItems()將包含下面的代碼 -

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; 
     }); 
} 

現在，是時候使用新添加的方法getAuthorizedMenuItems in BaSidebarCtrl.js。使用這種方式 -

// 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); 

所以，你user object會是這個樣子 -

var userCreds = { 
    userName: 'test@mail.com', 
    passWord: 'testpwd', 
    role: 'admin' 
}; 

這就是它！