extjs 权限问题

解题思路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>‘
           + ‘数&nbsp;&nbsp;据&nbsp;&nbsp;库: 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代码

1. var root=new Ext.tree.TreeNode({   
   2.                 id:"root",   
   3.                 text:"所有操作",   
   4.                 checked:false,   
   5.                 iconCls:‘task-folder‘  
   6.           });   
   7.              
   8.           var tree=new Ext.tree.TreePanel({   
   9.             frame:false,   
  10.             region:‘center‘,   
  11.             root:root,   
  12.             animate:true,   
  13.             enableDD:false,   
  14.             border:false,   
  15.             rootVisible:true,   
  16.             autoScroll:true  
  17.          });

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代码

1. var win = new Ext.Window({   
   2.             title:‘设置模块权限‘,   
   3.             closable:true,   
   4.             width:300,   
   5.             height:500,   
   6.             plain:true,   
   7.             layout:‘border‘,   
   8.             modal:true,   
   9.             items:[tree]   
  10.         });   
  11.         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代码

1. Ext.MessageBox.show({   
   2.             title:‘请稍候‘,   
   3.             msg:‘正在加载数据，请耐心等待...‘,   
   4.             progress:true              
   5.         });

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代码

1. Ext.Ajax.request({   
   2.             url:‘http://www.cnblogs.com/../privilegeAction.do?method=list‘,   
   3.             params:{   
   4.                 userId:row.get(‘userId‘),   
   5.                 parentId:parent   
   6.             },   
   7.             success:function(response, request){   
   8.                 Ext.MessageBox.hide();   
   9.                 var res = Ext.util.JSON.decode(response.responseText);   
  10.                 store_pri.loadData(res);   
  11.                 for(var i=0;i<store_pri.getCount();i++){   
  12.                     var rec = store_pri.getAt(i);   
  13.                     var canuse = (rec.get(‘canUse‘)==‘是‘?true:false);          
  14.                     var modid = rec.get(‘privilegeId‘) + ‘-id-‘ + rec.get(‘modelId‘);   
  15.                     var node;   
  16.                     if(rec.get(‘sort‘)==‘菜单‘){   
  17.                         node = new Ext.tree.TreeNode({   
  18.                             text:rec.get(‘modelName‘),   
  19.                             id:modid,   
  20.                             checked:canuse,   
  21.                             iconCls:‘task-folder‘  
  22.                         });   
  23.                         node.on(‘click‘,function(node){   
  24.                             if(node.firstChild==null){   
  25.                                 getNodes(row,node,get_mod_id(node.id));   
  26.                              }   
  27.                         });   
  28.                     } else {   
  29.                         node = new Ext.tree.TreeNode({   
  30.                             text:rec.get(‘modelName‘),   
  31.                             id:modid,   
  32.                             checked:canuse,   
  33.                             iconCls:‘task‘  
  34.                         });   
  35.                     }   
  36.                     node.on(‘checkchange‘,function(node,check){   
  37.                         Ext.Ajax.request({   
  38.                             url:‘http://www.cnblogs.com/../privilegeAction.do?method=save2‘,   
  39.                             params:{   
  40.                                 privilegeId:get_rec_id(node.id),   
  41.                                 canuse:(check?‘是‘:‘否‘)   
  42.                             },   
  43.                             success:function(response, request){   
  44.                                
  45.                             },   
  46.                             failure:function(){   
  47.                                 Ext.MessageBox.hide();   
  48.                                 alert(‘sorry!‘);   
  49.                             }   
  50.                         });        
  51.                     });   
  52.                     root.appendChild(node);   
  53.                 }   
  54.                 root.expand();   
  55.             },   
  56.             failure:function(){   
  57.                 Ext.MessageBox.hide();   
  58.                 alert(‘sorry!‘);   
  59.             }   
  60.         });

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!‘);            }        });

当非叶子节点被点击时，递归地调用方法来获取孩子节点。

获取行的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];   
       }

时间： 2024-07-31 13:09:17

extjs 权限问题的相关文章

Asp.net MVC4 ExtJS权限管理系统源码 C#开发框架源码

开发环境:VS2010或以上 数据库:SQL Server 2008 r2 MVC版本:Asp.net mvc 4.0 ExtJs版本:ext-4.2 功能介绍 1.多标签,js动态加载模式,全ajax操作,让基于extjs的应用不再那么慢 2.数据表格列头可自由拖动并记录拖动后的位置 3.新的neptune主题 4.使用Elmah异常记录组件,可直接在后台查看异常记录,方便维护人员定位异常 5.虽然是全ajax操作,但是仍然可以操作浏览器的前进后退功能 需要源码请加QQ:798743532

Extjs 权限系统

1.extjs4 作为前段框架,封装grid window form treegrid等.2.EF codefirst作为orm底层.3.使用ioc 依赖注入作为程序注入.4.使用aop作为权限.日志.异常的拦截.避免程序中大量使用日志权限异常代码.5.面向接口的服务,使用泛型模板作为数据操作.6.使用log4net作为日志底层.7.良好的权限控制,可判断前台操作跟后台权限操作.8.使用NPOI作为excel操作框架.9.权限基于反射,根据特性判断哪些可以控制权限.10.linq扩展,可查询多w

权限设计Extjs

1.extjs4 作为前段框架,封装grid window form treegrid等.2.EF codefirst作为orm底层.3.使用ioc 依赖注入作为程序注入.4.使用aop作为权限.日志.异常的拦截.避免程序中大量使用日志权限异常代码.5.面向接口的服务,使用泛型模板作为数据操作.6.使用log4net作为日志底层.7.良好的权限控制,可判断前台操作跟后台权限操作.8.使用NPOI作为excel操作框架.9.权限基于反射,根据特性判断哪些可以控制权限.10.linq扩展,可查询多w

Angularjs,WebAPI 搭建一个简易权限管理系统

Angularjs,WebAPI 搭建一个简易权限管理系统 Angularjs名词与概念(一) 1. 目录 前言 Angularjs名词与概念 权限系统原型 权限系统业务 数据库设计和实现 WebAPI项目主体结构 Angularjs前端主体结构 2. 前言 Angularjs开发CRUD类型的Web系统生产力惊人,与jQuery,YUI,kissy,Extjs等前端框架区别非常大,初学者在学习的过程中容易以自己以往的经验来学习Angularjs 往往走入误区,最典型的特征是在的开发过程中,使用

jQuery和ExtJS的timeOut超时问题和event事件处理问题

对jQuery来说,超时可以直接设置timeout参数,并在error事件中捕获第二个参数,如果是“timeout”则表明捕获了超时事件,非常清楚. 例子: $.ajax({         type: "POST",         contentType: "application/json",         url: "../ws/MyService.asmx/test",         data: '{"email"

从零开始编写自己的C#框架（18）——Web层后端权限模块——菜单管理

从本章开始,主要讲解的是页面中对框架相关功能的调用方法,比如列表页面(又分为有层次感列表和普通列表).编辑页面.多标签页面等,只要熟悉了这些函数的使用方法,那么开发起来就会很便捷了. 1.如图先创建菜单列表与编辑页面 MenuInfoList.aspx 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MenuInfoList.aspx.cs" Inherits=&quo

ExtJs笔记

1.Ext简介.Extjs是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面.ExtJs可以用来开发RIA(Rich Internet Application,富互联网应用系统)的Ajax应用框架.ExtJs是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架.因此,可以把ExtJs用在.Net,Java.Php等各种开发语言开发的应用中2.Ext库文件说明                       

ExtJS 4.2 业务开发(一)主页搭建

本篇开始搭建一个ExtJS 4.2单页面应用, 这里先介绍主页的搭建,内容包括:主页结构说明.扩展功能等方面. 目录 1. 主页结构说明 2. 扩展功能 3. 在线演示地址 1. 主页结构说明 1.1 主页布局 传统的ExtJS 4.2应用,基本布局如下: 1.2 主页布局分析 根据上面的主页布局图,可转换具体试图结构: header:存放系统的名称.logo.用户信息等内容. menu:菜单区域,以Tree形态展现业务入口. tab:业务区域,具体的业务都以tab页的形式嵌入到此区域. 1.3

通用后台管理系统（ExtJS 4.2 + Spring MVC 3.2 + Hibernate）

通用后台管理系统(ExtJS 4.2 +Spring MVC 3.2 + Hibernate) 开发语言JAVA 成品成品 前端技术extjs 数据库mysql,sql server,oracle 系统可作为OA.网站.电子政务.ERP.CRM.APP后台等基于B/S架构的应用软件系统的快速开发框架. 详细信息 原文:http://www.yctxkj.com/product/showproduct.php?lang=cn&id=16 系统可作为OA.网站.电子政务.ERP.CRM.APP后台等