AngularJS Blur-Adminテンプレートの役割ベースのアクセス制御

Question

ロールベースのアクセス制御は、angularJS用のBlur-Adminテンプレートで実装されていますか？役割を定義する場所どのファイルが関係していますか？

Answer 1

完璧な解決策！このソリューションは、基本的に、そのコンポーネントに許可される役割へのアクセスを制限します。 baSidebar.service.js、追加、変更

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

- （例えば） -

は、このようにあなたのメインモジュールの全てにparamsを定義します新しい機能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をBaSidebarCtrl.js。このようにそれを使用する - それ

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

だ -

// 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は次のようになります！