extjs+Acegi 解决权限问题 菜单，按钮，URL

这两天在解决extjs 的权限问题。要求控制的对象是  菜单，按钮，URL

解题思路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>

 

这样就可以在后台控制前台的组件是否显示了，从而达到了我们的目的。