extjs 的权限问题 要求控制的对象是 菜单,按钮,URL


Posted in Javascript onMarch 09, 2010

解题思路1 : 重载Connection类
由于extjs和server端交互全都是 json格式的数据交互,server端不会控制页面的跳转,页面跳转,提示功能全都有extjs来完成。
extjs和server端的交互方法全都是继承自 Ext.data.Connection,这个类中可以拦截所有和server端交互的方法。
server端的权限控制用acegi做的,如果没通过acegi的验证,没有授权会返回到403.jsp,需要重登录会返回到 login.jsp。
因此重载Connection类,并改写其中的 handleResponse 方法,判断返回的结果是否是 403.jsp,login.jsp, 如果是就进行相应的控制,如果是正常的返回数据就继续向下执行。
我个人在403.jsp 和login.jsp 的第一行加上了 注释代码<!--权限控制自定义关键字-->,就是靠这个关键字来工作的
,代码如下:

//此处重载了Cunnection方法,用来拦截client与Server的交 互, 
//后台acegi拦截用户请求后,如果无权限,返回403.jsp;如果没登录,返回login.jsp; 
//通过Acegi拦截 后,才返回用户想要的Json结果 
Ext.override(Ext.data.Connection, { 
handleResponse : Ext.data.Connection.prototype.handleResponse.createInterceptor( 
function(response) { 
var resText=response.responseText; 
if (resText.length>10) { 
resText=resText.substr(0,9); 
} 
if (resText=='<!--login'){ 
window.top.location.href = topURL+"/login.jsp"; 
} else if (resText=='<!--deny-'){ 
if (resText=='<!--deny-'){ 
Ext.Msg.show({ 
title : '错误提示', 
msg : '禁止访问此功能,请和系统管理员联系', 
buttons : Ext.Msg.OK, 
icon : Ext.Msg.INFO 
}); 
}; 
} else if (resText=='<!--404--'){ 
Ext.Msg.show({ 
title : '错误提示', 
msg : '页面未找到', 
buttons : Ext.Msg.OK, 
icon : Ext.Msg.INFO 
}); 
} 
}) 
});

解题思路2: server端返回菜单json数据
我的菜单用tree来做的,在初始化主页面时先初始化菜单,
loader : new Ext.tree.TreeLoader({ 
dataUrl : 'getJsonMenus.do' 
}), 
这个'getJsonMenus.do'返回菜单json数据,在strut2中的配置为: 
<action name="getJsonMenus" class="jsonSystemAction" method="getJsonMenus"> 
<result type="json"> 
<param name="root">menus</param> 
</result> 
</action>

menus是个list<JsonMenu>,
JsonMenu的属性为:
private String text;
private boolean expanded;
private String id;
private boolean leaf;
private List<JsonMenu> children;
getJsonMenus.do 返回的格式是可以满足tree的格式要求的。
js代码如下
Ext.onReady(function() { 
setTimeout(function() { 
Ext.get('loading').remove(); 
Ext.getDom('header').style.visibility = 'visible'; 
var vp = new Ext.Viewport({ 
layout : 'border', 
defaults : { 
collapsible : true, 
split : true 
}, 
items : [{ 
xtype : 'box', 
region : 'north', 
applyTo : 'header', 
height : 30, 
split : false 
}, { 
title : currentUser, 
id : 'accordion-panel', 
layout : 'border', 
region : 'west', 
margins : '2 0 5 5', 
width : 200, 
minSize : 200, 
maxSize : 250, 
bodyStyle : 'background-color:#DFE8F6', 
defaults : { 
border : false 
}, 
bbar : [{ 
text : '开始', 
iconCls : 'icon-plugin', 
menu : new Ext.menu.Menu({ 
items : [{ 
text : '关于系统', 
iconCls : 'icon-info', 
handler : function() { 
new Ext.Window({ 
closeAction : 'close', 
resizable : false, 
bodyStyle : 'padding: 7', 
modal : true, 
title : '关于本系统', 
html : '本系统采用目前较为流行的技术实现,<br>前台使用了ExtJs技术,所以实现了跨浏览器<br>' + 
' 本程序在IE6,IE7,FireFox3均测试通过!<br><br>主要技术: Struts2 + Spring + iBatis + ExtJs<br><br>' 
+ '数  据  库: Oracle 9i', 
width : 300, 
height : 200 
}).show(); 
} 
}, { 
text : '退出系统', 
iconCls : 'icon-delete', 
handler : function() { 
Ext.Msg.confirm('操作提示', '您确定要退出本系统?', function(btn) { 
if ('yes' == btn) { 
Ext.Ajax.request({ 
url : 'logout.do', 
success : function() { 
location = '/'; 
}, 
failure : function() { 
Ext.Msg.show({ 
title : '错误提示', 
msg : '退出系统失败!', 
icon : Ext.Msg.ERROR, 
buttons : Ext.Msg.OK 
}); 
} 
}); 
} 
}); 
} 
}] 
}) 
}], 
items : [{ 
layout : 'accordion', 
region : 'center', 
items : [{ 
title : '导航菜单', 
iconCls : 'icon-nav', 
border : false, 
items : [{ 
xtype : 'treepanel', 
border : false, 
rootVisible : false, 
autoScroll : true, 
loader : new Ext.tree.TreeLoader({ 
dataUrl : 'getJsonMenus.do' 
}), 
root : new Ext.tree.AsyncTreeNode(), 
listeners : { 
'click' : function(n) { 
try { 
var sn = this.selModel.selNode || {}; 
if (n.leaf && n.id != sn.id) { 
Ext.getCmp('content-panel').layout.setActiveItem(n.id.substring(0, n.id 
.indexOf('-')) 
+ '-panel'); 
} 
} catch (e) { 
} 
} 
} 
}] 
},{ 
title : '系统设置', 
iconCls : 'icon-nav' 
}] 
}] 
}, { 
id : 'content-panel', 
region : 'center', 
layout : 'card', 
margins : '2 5 5 0', 
activeItem : 0, 
border : false, 
items : [start, p_company, p_user, p_dept, p_system, p_subject, p_category, p_resource] 
}] 
}); 
}, 250); 
});

这样就得到了菜单,还有网友提出了异步菜单解决方法,我也把它列到下面
解题思路3 : 同步加载所有的TAG,用hidden属性控制显示
所有的tag必须要同步加载后才可以控制component的hidden属性,异步加载不好用。
同步加载的方法如下:
//FUTURE_TAG全局的TAG控制类, 控制的组件的hidden属性,key=TAG的名字,value=true(组件隐藏),false(组件显示) 
var FUTURE_TAG={tbar1: false, tbar2: true}; 
var conn = Ext.lib.Ajax.getConnectionObject().conn; 
conn.open("GET", 'getJsonTags.do',false); 
conn.send(null); 
future_tag= eval('(' + conn.responseText + ')');

在js中TAG的用法如下:
var btn_add_system = new Ext.Button({ 
text : '添加', 
iconCls : 'icon-add', 
hidden: FUTURE_TAG.system_add, 
handler : function() { 
window_add_system.show(); 
} 
});

getJsonTags.do 返回一个Map对象,key是TAG名字,value是boolean
java的写法如下:
tagMap=new HashMap<String,Boolean>(); 
for (int i=0;i<allTagList.size();i++){ 
tagMap.put(allTagList.get(i).getResString(), true); 
}

strut2配置如下:
<action name="getJsonTags" class="jsonSystemAction" method="getJsonTags"> 
<result type="json"> 
<param name="root">tagMap</param> 
</result> 
</action>

这样就可以在后台控制前台的组件是否显示了,从而达到了我们的目的。
解决思路4:
通过ajax读取服务器端的权限值,返回这样的数据:
{tbar1: false, tbar2: true}
然后在extjs中:
var vResult = eval('(' + ajaxText + ')'); //得到{tbar1: false, tbar2: true}
这样就可以直接给tbar赋值了
disabled: vResult.tbar1
disabled: vResult.tbar2
解决思路5:
设置模块权限用于设置用户可以操作的权限。允许设置用户对模块的可操作与不可操作。
弹出设置权限子窗体
设置权限之前须选择一个用户。
Js代码
var row = grid_user.getSelectionModel().getSelected(); 
if(!row){ 
alert('对不起,您还未选择数据!'); 
return; 
} 
var row = grid_user.getSelectionModel().getSelected(); 
if(!row){ 
alert('对不起,您还未选择数据!'); 
return; 
}

创建一棵树,树放置在弹出窗体的中央。
Js代码
var root=new Ext.tree.TreeNode({ 
id:"root", 
text:"所有操作", 
checked:false, 
iconCls:'task-folder' 
}); 
var tree=new Ext.tree.TreePanel({ 
frame:false, 
region:'center', 
root:root, 
animate:true, 
enableDD:false, 
border:false, 
rootVisible:true, 
autoScroll:true 
}); 
var root=new Ext.tree.TreeNode({ 
id:"root", 
text:"所有操作", 
checked:false, 
iconCls:'task-folder' }); 
var tree=new Ext.tree.TreePanel({ 
frame:false, 
region:'center', 
root:root, 
animate:true, 
enableDD:false, 
border:false, 
rootVisible:true, 
autoScroll:true 
});

创建弹出子窗体。
Js代码
var win = new Ext.Window({ 
title:'设置模块权限', 
closable:true, 
width:300, 
height:500, 
plain:true, 
layout:'border', 
modal:true, 
items:[tree] 
}); 
win.show(this); 
var win = new Ext.Window({ 
title:'设置模块权限', 
closable:true, 
width:300, 
height:500, 
plain:true, 
layout:'border', 
modal:true, 
items:[tree] 
}); 
win.show(this);

在加载数据期间,给予提示。
Js代码
Ext.MessageBox.show({ 
title:'请稍候', 
msg:'正在加载数据,请耐心等待...', 
progress:true 
}); 
Ext.MessageBox.show({ 
title:'请稍候', 
msg:'正在加载数据,请耐心等待...', 
progress:true 
});

将根节点,所选择的用户行,父节点标志作为参数调用方法。
Js代码
getNodes(row,root,'root');
getNodes(row,root,'root');
从后台中取得数据并以树形式在客户端展现
方法定义与方法内容。
Js代码
function getNodes(row,root,parent){ 
//... 
} 
function getNodes(row,root,parent){ //...}

JSON 数据的定义。
Js代码
var record_pri = new Ext.data.Record.create([ 
{name:'modelId'}, 
{name:'modelName'}, 
{name:'sort'}, 
{name:'canUse'}, 
{name:'privilegeId'} 
]); 
var store_pri = new Ext.data.Store({ 
proxy: new Ext.data.HttpProxy({url:'../'}), 
reader: new Ext.data.JsonReader({root:'rows'},record_pri) 
}); 
var record_pri = new Ext.data.Record.create([ 
{name:'modelId'}, 
{name:'modelName'}, 
{name:'sort'}, 
{name:'canUse'}, 
{name:'privilegeId'} 
]); var store_pri = new Ext.data.Store({ 
proxy: new Ext.data.HttpProxy({url:'../'}), 
reader: new Ext.data.JsonReader({root:'rows'},record_pri) 
});

无刷新请求,获取数据并展现出来;并添加事件监听。当点击树某一节点时,判断是否已经从后台取得数据,如果还没有取则从后台获取数据,再根据返回的数据判断是叶子节点还是非叶子节点。然后以不同的方式展现与处理。
叶子节点和非叶子节点展现时,使用的图标不同。叶子节点没有添加单击事件,而非叶子节点添加了单击事件。
Js代码
Ext.Ajax.request({ 
url:'http://www.cnblogs.com/../privilegeAction.do?method=list', 
params:{ 
userId:row.get('userId'), 
parentId:parent 
}, 
success:function(response, request){ 
Ext.MessageBox.hide(); 
var res = Ext.util.JSON.decode(response.responseText); 
store_pri.loadData(res); 
for(var i=0;i<store_pri.getCount();i++){ 
var rec = store_pri.getAt(i); 
var canuse = (rec.get('canUse')=='是'?true:false); 
var modid = rec.get('privilegeId') + '-id-' + rec.get('modelId'); 
var node; 
if(rec.get('sort')=='菜单'){ 
node = new Ext.tree.TreeNode({ 
text:rec.get('modelName'), 
id:modid, 
checked:canuse, 
iconCls:'task-folder' 
}); 
node.on('click',function(node){ 
if(node.firstChild==null){ 
getNodes(row,node,get_mod_id(node.id)); 
} 
}); 
} else { 
node = new Ext.tree.TreeNode({ 
text:rec.get('modelName'), 
id:modid, 
checked:canuse, 
iconCls:'task' 
}); 
} 
node.on('checkchange',function(node,check){ 
Ext.Ajax.request({ 
url:'http://www.cnblogs.com/../privilegeAction.do?method=save2', 
params:{ 
privilegeId:get_rec_id(node.id), 
canuse:(check?'是':'否') 
}, 
success:function(response, request){ }, 
failure:function(){ 
Ext.MessageBox.hide(); 
alert('sorry!'); 
} 
}); 
}); 
root.appendChild(node); 
} 
root.expand(); 
}, 
failure:function(){ 
Ext.MessageBox.hide(); 
alert('sorry!'); 
} 
}); 
Ext.Ajax.request({ 
url:'http://www.cnblogs.com/../privilegeAction.do?method=list', 
params:{ 
userId:row.get('userId'), 
parentId:parent 
}, 
success:function(response, request){ 
Ext.MessageBox.hide(); 
var res = Ext.util.JSON.decode(response.responseText); 
store_pri.loadData(res); 
for(var i=0;i<store_pri.getCount();i++){ 
var rec = store_pri.getAt(i); 
var canuse = (rec.get('canUse')=='是'?true:false); 
var modid = rec.get('privilegeId') + '-id-' + rec.get('modelId'); 
var node; 
if(rec.get('sort')=='菜单'){ 
node = new Ext.tree.TreeNode({ 
text:rec.get('modelName'), 
id:modid, 
checked:canuse, 
iconCls:'task-folder' 
}); 
node.on('click',function(node){ 
if(node.firstChild==null){ 
getNodes(row,node,get_mod_id(node.id)); 
} 
}); 
} else { 
node = new Ext.tree.TreeNode({ 
text:rec.get('modelName'), 
id:modid, 
checked:canuse, 
iconCls:'task' 
}); 
} 
node.on('checkchange',function(node,check){ 
Ext.Ajax.request({ 
url:'https://3water.com/../privilegeAction.do?method=save2', 
params:{ 
privilegeId:get_rec_id(node.id), 
canuse:(check?'是':'否') 
}, 
success:function(response, request){ 
}, 
failure:function(){ 
Ext.MessageBox.hide(); 
alert('sorry!'); 
} 
}); 
}); 
root.appendChild(node); 
} 
root.expand(); 
}, 
failure:function(){ 
Ext.MessageBox.hide(); 
alert('sorry!'); 
} });

当非叶子节点被点击时,递归地调用方法来获取孩子节点。
获取行的ID和模块的ID。树的节点将行的ID和模块的ID一起取出来了。不然的话,如果只取得模块ID,而不取行ID,那么在修改的时候,则不能进行正确的修改。
Js代码
function get_rec_id(str){ 
var arr = str.split('-id-'); 
return arr[0]; 
} 
function get_mod_id(str){ 
var arr = str.split('-id-'); 
return arr[1]; 
}
Javascript 相关文章推荐
onpropertypchange
Jul 01 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
js Math 对象的方法
Sep 01 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
javascript 简单抽屉效果的实现代码
Mar 09 #Javascript
Javascript常考语句107条收集
Mar 09 #Javascript
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 #Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 #Javascript
JavaScript this调用规则说明
Mar 08 #Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 #Javascript
JavaScript中的闭包原理分析
Mar 08 #Javascript
You might like
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
JS中的三个循环小结
2017/06/20 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
Fiddler如何抓取手机APP数据包
2016/01/22 Python
Python中logging实例讲解
2019/01/17 Python
利用python求积分的实例
2019/07/03 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
机电专业个人求职信范文
2013/12/30 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书
详解JVM系列之内存模型
2021/06/10 Javascript
python 对图片进行简单的处理
2021/06/23 Python
基于Python实现股票收益率分析
2022/04/02 Python
拙作再改《我的收音机情缘》
2022/04/05 无线电