现在项目里有这个需求:用户登录的时候可以选择不同的角色,每个角色对应着各种不同的权限,这些权限决定了要给用户显示哪些菜单。
我是这样实现的:首先将用户登录后的权限信息和这些权限可以显示的菜单项一起封装在userinfo里设到session里面,
界面上js里事先设定好了各种权限和菜单对象,并且每个对象都用一个boolean型开关来标识,JS从传过来的权限和菜单项中取出该用户的权限和菜单数组,把对应的boolean值改成true,接下来再把菜单的boolean开关是true的添加到toolbar上,权限也是一个样子(对应菜单的子项),这样菜单就动态的生成好了。
这样做的缺点是后期维护起来不好,因为菜单项和权限都事先写死在js里面了,要想修改的话必须一个一个改,但是如果将菜单的生成全都拿到服务端来做又觉得界面和服务耦合在一起了,服务做了太多的事,我一直认为界面的东西就应该全交给html和JS来做,尤其是现在有了EXT这么好的客户端组件库。不知道有没有更好的解决办法
js代码例如:
js 代码
- //1总线菜单
- var bbusmenu=false;
- //2接入点菜单
- var bportalmenu=false;
- //3规约菜单
- var bcriterionmenu=false;
- .....
- //菜单开启
- for (i=0;i
- var m=menulist[i];
- switch(m)
- {
- case '1':
- bbusmenu=true;
- break;
- case '2':
- bportalmenu=true;
- break;
- case '3':
- bcriterionmenu=true;
- break;
- ......
- //总线菜单
- var busmenu=new Ext.menu.Menu({
- id:'busMenu',
- items:[
- {text:'总线维护',
- handler: onItemClick
- },
- {
- text:'总线互访配置',
- handler:onItemClick
- }
- ]
- });
- //接入点菜单
- var portalmenu=new Ext.menu.Menu({
- id:'portalMenu',
- items:[
- {text:'接入点维护',
- handler: onItemClick
- },
- {text:'接入点挂接总线配置',
- handler: onItemClick
- }
- ]
- });
- //规约菜单
- var criterionmenu=new Ext.menu.Menu({
- id:'criterionMenu',
- items:[
- {text:'规约维护',
- handler: onItemClick
- }]
- });
- ......
- var tb = new Ext.Toolbar();
- tb.render('toolbar');
- if(bbusmenu){
- tb.add(
- new Ext.Toolbar.MenuButton({
- text: '总线管理',
- handler: onButtonClick,
- tooltip: {text:'This is 总线', title:'Tip Title', autoHide:false},
- iconCls: 'blist',
- menu : busmenu
- }), '-');
- }
- ......