如何使用AngularJS创建基于角色的动态菜单

How to create dynamic menu base on roles using AngularJS

本文关键字：角色 动态 菜单 AngularJS 何使用 创建 于角色      更新时间：2023-09-26

我对AngularJS很陌生。

template.js 

 $templateCache.put('template/sidebar-left.html',
        "<div class='"sidebar-inner c-overflow'"><div class='"profile-menu'"><a href='"'" toggle-submenu><div class='"profile-pic'"><img src='"img/profile-pics/1.jpg'" alt='"'"></div><div class='"profile-info'">Malinda Hollaway <i class='"zmdi zmdi-caret-down'"></i></div></a><ul class='"main-menu'"><li><a data-ui-sref='"pages.profile.profile-about'" data-ng-click='"mactrl.sidebarStat($event)'"><i class='"zmdi zmdi-account'"></i> View Profile</a></li><li><a href='"'"><i class='"zmdi zmdi-input-antenna'"></i> Privacy Settings</a></li><li><a href='"'"><i class='"zmdi zmdi-settings'"></i> Settings</a></li><li><a href='"'"><i class='"zmdi zmdi-time-restore'"></i> Logout</a></li></ul></div><ul class='"main-menu'"><li data-ui-sref-active='"active'"><a data-ui-sref='"home'" data-ng-click='"mactrl.sidebarStat($event)'"><i class='"zmdi zmdi-home'"></i> Dashboard</a></li><li data-ui-sref-active='"active'"><a data-ui-sref='"timeline'" data-ng-click='"mactrl.sidebarStat($event)'"><i class='"zmdi zmdi-layers'"></i>Timeline</a></li>...");

controller.js 

this.loginF = function(user) {
    $http.post("data/login.php", user).then(function(userData) {
        $rootScope.login = userData.data
        if( $rootScope.login == "failed" ) {
            alert(JSON.stringify($rootScope.login))
        } else {
            window.location.assign("home.html");
        }
    })
}
这是我的侧边栏的template.js代码。我需要根据用户角色设置此菜单项。我不知道如何使这个项目动态。我在$rootScope中分配了用户角色。我如何在template.js中使用它?

嗯，在分析了你的模板之后，它似乎没有任何多级元素，所以第一个近似将是将你的模板转换为数组，如

  var profMenu = [
  {title: 'View profile', icon :'zmdi zmdi-account', link:'pages.profile.profile-about', roles: ['role1','role2']},
  {title: 'Privacy Settings', icon :'zmdi zmdi-input-antenna', link:'', roles: ['role1','role2']},
  {title: 'Settings', icon :'zmdi zmdi-input-antenna', link:'', roles: ['role1','role2']},
  {title: 'Logout', icon :'zmdi zmdi-time-restore', link:'', roles: ['role1','role2']}
]

那么你有两个选择:

  1. 使用ng-if/ng-repeat指令管理菜单绘制

  2. 创建一个自定义指令，并在任何用户更改时，将菜单数组发送给它，并根据角色属性

    3. 绘制任何菜单项。

我不知道什么对你更好，也不知道如何在你的应用程序中集成提供的数据。

我唯一的建议是这是一个大禁忌，从安全的角度来看，完全绘制它，然后通过CSS/DOM操作隐藏不需要的项目

如果您的安全性需求接近"偏执"级别，您甚至不应该构建前面提到的数组。相反，您应该向服务器发出请求，服务器应该返回一个仅包含当前用户可以访问的项的数组

很抱歉没有提供一个完整的例子。

相关文章：