検索

ホームページ  >  記事  >  ウェブフロントエンド  >  extjs の権限の問題では、制御されるオブジェクトがメニュー、ボタン、URL である必要があります。

extjs の権限の問題では、制御されるオブジェクトがメニュー、ボタン、URL である必要があります。

PHP中文网
PHP中文网オリジナル
2017-03-31 15:12:201168ブラウズ

問題解決のアイデア 1: ext による Connection クラス
のオーバーロードjs とサーバー側の間の対話はすべて json 形式のデータ対話です。ページ ジャンプとプロンプト関数はすべて extjs と extjs。サーバー側のすべての対話メソッドは
Ext.data.Connection から継承されます。このクラスは、サーバー側との対話のすべてのメソッドをインターセプトできます。サーバー側の権限制御は acegi によって行われます。 acegi.Verification が通らない場合、認証がない場合は 403.jsp
に戻りますので、再度ログインする必要がある場合は、login.jsp をリロードします。 Connectionクラスを作成し、handleResponseメソッドを書き換えて、返された結果が403.jsp、login.jspであるかどうかを判定し、返されたデータが正常であれば、下方向に実行し続けます。
私は個人的に 403.jsp と login.jsp を使用しています。 コメント コード
が 1 行追加されています。これは、このキーワードに依存して機能します コードは次のとおりです。

問題解決のアイデア 2: サーバー側はメニューの JSON データを返します。

私のメニューはツリーで作成されています。メインページを初期化するときは、最初にメニューを初期化します。 🎜> コードは次のとおりです: 
//此处重载了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==&#39;<!--login&#39;){ 
window.top.location.href = topURL+"/login.jsp"; 
} else if (resText==&#39;<!--deny-&#39;){ 
if (resText==&#39;<!--deny-&#39;){ 
Ext.Msg.show({ 
title : &#39;错误提示&#39;, 
msg : &#39;禁止访问此功能,请和系统管理员联系&#39;, 
buttons : Ext.Msg.OK, 
icon : Ext.Msg.INFO 
}); 
}; 
} else if (resText==&#39;<!--404--&#39;){ 
Ext.Msg.show({ 
title : &#39;错误提示&#39;, 
msg : &#39;页面未找到&#39;, 
buttons : Ext.Msg.OK, 
icon : Ext.Msg.INFO 
}); 
} 
}) 
});


This'getJsonMenus.do' はメニューの JSON データを返します。

loader : new Ext.tree.TreeLoader({ 
dataUrl : &#39;getJsonMenus.do&#39; 
}),
menus は次のとおりです。

list
c7d4cb2181e7558dd1a26e3e1e31c4df Children; getJsonMenus.do によって返される形式は次のとおりです

このようにして、メニューが取得されます。一部のネチズンは非同期メニュー ソリューションを提案しており、私もそれを含めました。
ソリューション アイデア 3: すべての TAG を同期的にロードし、hidden 属性を使用して、表示を制御する
コンポーネントの非表示属性を制御する前に、すべてのタグを同期的に読み込む必要があります。非同期読み込みは使いにくいです。
同期読み込みの方法は次のとおりです。 

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 : '本系统采用目前较为流行的技术实现,
前台使用了ExtJs技术,所以实现了跨浏览器
' + 
' 本程序在IE6,IE7,FireFox3均测试通过!

主要技术: Struts2 + Spring + iBatis + ExtJs

' 
+ '数  据  库: 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 : &#39;getJsonMenus.do&#39; 
}), 
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); 
});
js での TAG の使用法は次のとおりです。




getJsonTags.do は Map

//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", &#39;getJsonTags.do&#39;,false); 
conn.send(null); 
future_tag= eval(&#39;(&#39; + conn.responseText + &#39;)&#39;);
オブジェクト

、キーはタグ名、値はブール値です
Java は次のように記述されます: 

var btn_add_system = new Ext.Button({ 
text : &#39;添加&#39;, 
iconCls : &#39;icon-add&#39;, 
hidden: FUTURE_TAG.system_add, 
handler : function() { 
window_add_system.show(); 
} 
});

Strut2 構成は次のとおりです: このようにして、前景コンポーネントを背景に表示するかどうかを制御でき、それによって目的を達成できます。
解決策 4:

ajax を通じてサーバー側の権限値を読み取り、次のようなデータを返します: 
tagMap=new HashMap<String,Boolean>(); 
for (int i=0;i<allTagList.size();i++){ 
tagMap.put(allTagList.get(i).getResString(), true); 
}
{tbar1: false, tbar2: true}

次に extjs で:
var vResult = eval ('(' ajaxText ')'); //Get {tbar1: false, tbar2: true}

このようにして、tbar 
<action name="getJsonTags" class="jsonSystemAction" method="getJsonTags"> 
<result type="json"> 
<param name="root">tagMap</param> 
</result> 
</action>
disabled: vResult.tbar1

disabled に値を直接割り当てることができます。 vResult.tbar2
解決策 5:
モジュールの権限の設定は、ユーザーが操作できる権限を設定するために使用されます。モジュールの動作可否を設定できます。
権限を設定するためのサブフォームがポップアップ表示されます。
権限を設定する前にユーザーを選択する必要があります。
Js コード


ポップアップ フォームの中央に配置されるツリーを作成します。
JS コード


ポップアップサブフォームを作成します。
Js コード 

var row = grid_user.getSelectionModel().getSelected(); 
if(!row){ 
alert(&#39;对不起，您还未选择数据!&#39;); 
return; 
} 
var row = grid_user.getSelectionModel().getSelected(); 
if(!row){ 
alert(&#39;对不起，您还未选择数据!&#39;); 
return; 
}

データの読み込み中にプロンプ​​トを表示します。
Js コード 

var root=new Ext.tree.TreeNode({ 
id:"root", 
text:"所有操作", 
checked:false, 
iconCls:&#39;task-folder&#39; 
}); 
var tree=new Ext.tree.TreePanel({ 
frame:false, 
region:&#39;center&#39;, 
root:root, 
animate:true, 
enableDD:false, 
border:false, 
rootVisible:true, 
autoScroll:true 
}); 
var root=new Ext.tree.TreeNode({ 
id:"root", 
text:"所有操作", 
checked:false, 
iconCls:&#39;task-folder&#39; }); 
var tree=new Ext.tree.TreePanel({ 
frame:false, 
region:&#39;center&#39;, 
root:root, 
animate:true, 
enableDD:false, 
border:false, 
rootVisible:true, 
autoScroll:true 
});

ルート ノード、選択したユーザー行、および親ノード フラグをパラメータとしてメソッドを呼び出します。
Js コード 

var win = new Ext.Window({ 
title:&#39;设置模块权限&#39;, 
closable:true, 
width:300, 
height:500, 
plain:true, 
layout:&#39;border&#39;, 
modal:true, 
items:[tree] 
}); 
win.show(this); 
var win = new Ext.Window({ 
title:&#39;设置模块权限&#39;, 
closable:true, 
width:300, 
height:500, 
plain:true, 
layout:&#39;border&#39;, 
modal:true, 
items:[tree] 
}); 
win.show(this);


はバックグラウンドからデータを取得し、クライアント上の

メソッド定義とメソッド内容をツリー形式で表示します。 
Ext.MessageBox.show({ 
title:&#39;请稍候&#39;, 
msg:&#39;正在加载数据，请耐心等待...&#39;, 
progress:true 
}); 
Ext.MessageBox.show({ 
title:&#39;请稍候&#39;, 
msg:&#39;正在加载数据，请耐心等待...&#39;, 
progress:true 
});
Js コード



JSON データの定義。 
getNodes(row,root,&#39;root&#39;); 
getNodes(row,root,&#39;root&#39;);
JSコード

var record_pri = new Ext.data.Record.create([ 
{name:&#39;modelId&#39;}, 
{name:&#39;modelName&#39;}, 
{name:&#39;sort&#39;}, 
{name:&#39;canUse&#39;}, 
{name:&#39;privilegeId&#39;} 
]); 
var store_pri = new Ext.data.Store({ 
proxy: new Ext.data.HttpProxy({url:&#39;../&#39;}), 
reader: new Ext.data.JsonReader({root:&#39;rows&#39;},record_pri) 
}); 
var record_pri = new Ext.data.Record.create([ 
{name:&#39;modelId&#39;}, 
{name:&#39;modelName&#39;}, 
{name:&#39;sort&#39;}, 
{name:&#39;canUse&#39;}, 
{name:&#39;privilegeId&#39;} 
]); var store_pri = new Ext.data.Store({ 
proxy: new Ext.data.HttpProxy({url:&#39;../&#39;}), 
reader: new Ext.data.JsonReader({root:&#39;rows&#39;},record_pri) 
});

无刷新请求，获取数据并展现出来；并添加事件监听。当点击树某一节点时，判断是否已经从后台取得数据，如果还没有取则从后台获取数据，再根据返回的数据判断是叶子节点还是非叶子节点。然后以不同的方式展现与处理。 
叶子节点和非叶子节点展现时，使用的图标不同。叶子节点没有添加单击事件，而非叶子节点添加了单击事件。 
Js代码 

Ext.Ajax.request({ 
url:&#39;http://www.cnblogs.com/../privilegeAction.do?method=list&#39;, 
params:{ 
userId:row.get(&#39;userId&#39;), 
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(&#39;canUse&#39;)==&#39;是&#39;?true:false); 
var modid = rec.get(&#39;privilegeId&#39;) + &#39;-id-&#39; + rec.get(&#39;modelId&#39;); 
var node; 
if(rec.get(&#39;sort&#39;)==&#39;菜单&#39;){ 
node = new Ext.tree.TreeNode({ 
text:rec.get(&#39;modelName&#39;), 
id:modid, 
checked:canuse, 
iconCls:&#39;task-folder&#39; 
}); 
node.on(&#39;click&#39;,function(node){ 
if(node.firstChild==null){ 
getNodes(row,node,get_mod_id(node.id)); 
} 
}); 
} else { 
node = new Ext.tree.TreeNode({ 
text:rec.get(&#39;modelName&#39;), 
id:modid, 
checked:canuse, 
iconCls:&#39;task&#39; 
}); 
} 
node.on(&#39;checkchange&#39;,function(node,check){ 
Ext.Ajax.request({ 
url:&#39;http://www.cnblogs.com/../privilegeAction.do?method=save2&#39;, 
params:{ 
privilegeId:get_rec_id(node.id), 
canuse:(check?&#39;是&#39;:&#39;否&#39;) 
}, 
success:function(response, request){ 

}, 
failure:function(){ 
Ext.MessageBox.hide(); 
alert(&#39;sorry!&#39;); 
} 
}); 
}); 
root.appendChild(node); 
} 
root.expand(); 
}, 
failure:function(){ 
Ext.MessageBox.hide(); 
alert(&#39;sorry!&#39;); 
} 
}); 
Ext.Ajax.request({ 
url:&#39;http://www.cnblogs.com/../privilegeAction.do?method=list&#39;, 
params:{ 
userId:row.get(&#39;userId&#39;), 
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(&#39;canUse&#39;)==&#39;是&#39;?true:false); 
var modid = rec.get(&#39;privilegeId&#39;) + &#39;-id-&#39; + rec.get(&#39;modelId&#39;); 
var node; 
if(rec.get(&#39;sort&#39;)==&#39;菜单&#39;){ 
node = new Ext.tree.TreeNode({ 
text:rec.get(&#39;modelName&#39;), 
id:modid, 
checked:canuse, 
iconCls:&#39;task-folder&#39; 
}); 
node.on(&#39;click&#39;,function(node){ 
if(node.firstChild==null){ 
getNodes(row,node,get_mod_id(node.id)); 
} 
}); 
} else { 
node = new Ext.tree.TreeNode({ 
text:rec.get(&#39;modelName&#39;), 
id:modid, 
checked:canuse, 
iconCls:&#39;task&#39; 
}); 
} 
node.on(&#39;checkchange&#39;,function(node,check){ 
Ext.Ajax.request({ 
url:&#39;http://www.jb51.net/../privilegeAction.do?method=save2&#39;, 
params:{ 
privilegeId:get_rec_id(node.id), 
canuse:(check?&#39;是&#39;:&#39;否&#39;) 
}, 
success:function(response, request){ 
}, 
failure:function(){ 
Ext.MessageBox.hide(); 
alert(&#39;sorry!&#39;); 
} 
}); 
}); 
root.appendChild(node); 
} 
root.expand(); 
}, 
failure:function(){ 
Ext.MessageBox.hide(); 
alert(&#39;sorry!&#39;); 
} });

当非叶子节点被点击时，递归地调用方法来获取孩子节点。 
获取行的ID和模块的ID。树的节点将行的ID和模块的ID一起取出来了。不然的话，如果只取得模块ID，而不取行ID，那么在修改的时候，则不能进行正确的修改。 
Js代码 

function get_rec_id(str){ 
var arr = str.split(&#39;-id-&#39;); 
return arr[0]; 
} 
function get_mod_id(str){ 
var arr = str.split(&#39;-id-&#39;); 
return arr[1]; 
}


声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Firefox の jQuery html() (.innerHTML を使用) は DOM の変更を無視します_jquery次の記事：Firefox の jQuery html() (.innerHTML を使用) は DOM の変更を無視します_jquery

関連記事

続きを見る