如何使用Ext JS作为基于角色的应用程序 [英] How to use Ext JS for role based application

问题描述

我正在计划使用Ext JS进行大型应用程序。应用程序的功能是基于角色的。当用户登录时，他们只看到与它们相关的菜单和屏幕功能。我的服务器端技术将是Java& JSP。

为了解决这个问题，我有两个想法..

1.使用服务器端技术在用户登录后动态创建Ext JS相关的JavaScript。 servlet / JSP将根据用户角色创建必要的est js代码。

2.在视图JSP中设置Js变量，以确保只有正确的功能可用给用户。

在Ext Js应用程序中确保安全性并提供基于角色的UI的最佳方法是什么。

提前感谢您的想法..

Abdel Olakara

解决方案

我不得不在应用程序中解决类似的问题我目前开发的权限，但权限是基于用户国家。

我知道你已经是，但只是为了重申任何人阅读的利益，权限应该始终在服务器端实现，JavaScript安全性始终是次要的。这是因为有一半的人可以使用书签或Firebug来执行任意JavaScript并规避您的客户端安全性。

我发现有几个做到这一点的方法，但特别是有两种方法是最理想的。无论采用何种方法，都需要考虑两件事情：1）什么JavaScript到服务器以及如何避免服务不必要的逻辑，2）如何避免执行用户不可用的逻辑。

懒惰加载和权限配置：

1. 我的应用程序中的所有窗口小部件都是通过 dojo.require ，所以没有必要担心JavaScript不必要的不​​适用于用户。我不太熟悉ExtJs图书馆，但据我所见，它不提供可比较的方法;然而，一个同步的ajax调用后跟一个eval是至关重要的。无论如何，在这种方法中，重要的是组件功能不会跨越不同的文件（同样，这通常是好的设计）。每个文件应该是自己的类来控制特定的小部件或其他UI元素。




2. 然后，我在服务器生成的JavaScript配置类中设置权限。这个类可以在整个应用程序中引用什么是什么和不允许的。

例如，以下方法控制访问全球控件中可用的大多数小部件。

  com.project.frontController.prototype.init = function （widgets）{
 var permissions = com.project.config.permissions; 
 
 //对于控制器中的每个窗口小部件
（var i = 0，l = widgets.length; i< l; ++ i）{
 //如果访问仅限于小部件（按ID），然后禁用它。 
 if（！permissions [widgets [i] .id] {
 com.project.util.disable（widgets [i] .btnAccessNode）; 
} 
 //否则， 
 else {
 //连接一个onclick处理程序或任何需要的窗口小部件
} 
} 
}; 
  

该配置看起来像：

  com.project.config.permissions = {
widgetAbc：{
 btnAccessNode：＃some-css-selector，
 otherWidgetConfig：etc 
}，
widgetXyz：{
 btnAccessNode：div.some-css-selector
} 
}; 
  

编译和功能检查：

1. 一些应用程序会将所有的JavaScript编译成一个文件，然后将它提供给客户端，如果你的应用程序做了这样的事情，你可以动态地进行这样的操作必要的JS可以在服务器端确定之前提供。当然，这会产生一些开销;但是，您可以按角色缓存已编译的版本。如果角色很少，那么这个缓存可以很容易地被引用，只是一个包含一个特定脚本的问题。




2. 由于只允许允许的JavaScript在尝试执行之前，只需要检测所需的类/功能是否可用就是您需要执行的权限检查。

例如，您的脚本包含可能如下所示：

 < script type =text / javascriptsrc = ？/ JS / compiler.php角色=主持人 >< /脚本> 
  

您的功能检查将是这样的：

  com.project.frontController.prototype.init = function（widgets）{
 //对于控制器中的每个小部件
 for（var i = 0 ，l = widgets.length; i< l; ++ i）{
 //如果窗口控件不存在，请禁用它。 
 if（！com.project.util.widgetExists [widgets [i] .id] {
 com.project.util.disable（widgets [i] .btnAccessNode）; 
} 
 //否则，将其启用并连接必要的事件处理程序
 else {
 //连接一个onclick处理程序或任何必需的窗口小部件
} 
} 
}; 
  

或

  com.project.someWidget.prototype.launchOtherWidget = function（）{
 if（typeof otherWidget！=undefined）{
（new otherWidget（））。 （）; 
} 
}; 
  

请注意，两种方法非常相似在实现中，我会说，确定两者之间的最佳方法是考虑代码库的大小，可用于编译的工具，以及缓存这些基于角色的编译包，对于我的项目，不仅编译器在环境中不可用，而且代码基础很大（1.3mb膨胀/ 296kb默认加上dojo库），这是不能接受的，因为客户端对维护低应用程序加载时间更感兴趣。

I am planning to use Ext JS for a large application. The application's features are role based. When user login, they only see menu and screen features related to them. My server side technology will be Java & JSP.

To solve this I have two ideas..
1. Create Ext JS related javascript dynamically after the user login using server side technology. The servlet / JSP will create the necessary est js code according to user roles.

2. Have Js variables that are set in view JSPs that will be used to ensure only the right features are available to users.

What is the best way to ensure security and provide role based UI in Ext Js application.
Thanks in advance for you ideas..

Abdel Olakara

解决方案

I had to solve a similar problem in an application that I currently developed, but permissions are based on user country.

I know you already are, but just to reiterate for the benefit of anyone reading, permissions should always be implemented on the server side and JavaScript security is always secondary. This is because anyone with half a brain can use either a bookmarklet or Firebug to execute arbitrary JavaScript and circumvent your client-side security.

I've found that there are several ways to do this, but there are two approaches in particular that are the most sane. Regardless of the approach, there are two things to consider: 1) what JavaScript to server and how to avoid serving unnecessary logic, and 2) how to avoid executing logic that is not available to the user.

Lazy loading and permissions configuration:

1. All widgets in my application are lazy loaded via dojo.require, so there was no need to worry about the unnecessary inclusion of JavaScript that wasn't applicable to the user. I am not deeply familiar with the ExtJs library, but as far as I have seen, it doesn't supply a comparable method; however, it is essential a synchronous ajax call followed by an eval. In any case, in this method it is important that component functionality doesn't cross-cut through different files (also, this is generally good design). Each file should be its own class that controls a specific widget or other UI element.

2. I then set permissions in a server generated JavaScript config class. This class can then be referenced throughout the application for what is and what is not allowed.

For example, the following method controlled access to most of the widgets that were available from global controls.

com.project.frontController.prototype.init = function(widgets) {
   var permissions = com.project.config.permissions;

   // For each widget in the controller
   for ( var i=0, l=widgets.length; i<l; ++i ) {
       // If access is restricted to the widget (by id), then disable it.
       if ( !permissions[ widgets[i].id ] {
           com.project.util.disable(widgets[i].btnAccessNode);
       }
       // Otherwise, leave it enabled and connect the necessary event handlers.
       else {
           // connect an onclick handler or whatever is required for the widget
       }
   }
};

And the config looked something like:

com.project.config.permissions = {
    "widgetAbc": {
        btnAccessNode:     "#some-css-selector",
        otherWidgetConfig: "etc"
    },
    "widgetXyz": {
        btnAccessNode:     "div.some-css-selector"
    }
};

Compile and functionality check:

1. Some applications will compile all of its JavaScript into one file, and then serve it to the client. If your application does such a thing, and you can manage to do this dynamically, all necessary JS can be determined on the server-side before it is served. Of course, this will accrue some overhead; however, you can cache compiled versions by role. If the roles are few, then this cache can be easily primed and it's just a matter of including one specific script.

2. Since only the allowed JavaScript will be available, simply detecting if the required class/function is available before attempting to execute it is all you need to do for your permissions check.

For example, you script inclusion may look like this:

<script type="text/javascript" src="/js/compiler.php?role=moderator"></script>

And your functionality check would be something like this:

com.project.frontController.prototype.init = function(widgets) {
   // For each widget in the controller
   for ( var i=0, l=widgets.length; i<l; ++i ) {
       // If the widget controller doesn't exist, disable it.
       if ( !com.project.util.widgetExists[ widgets[i].id ] {
           com.project.util.disable(widgets[i].btnAccessNode);
       }
       // Otherwise, leave it enabled and connect the necessary event handlers.
       else {
           // connect an onclick handler or whatever is required for the widget
       }
   }
};

or

com.project.someWidget.prototype.launchOtherWidget = function() {
    if ( typeof otherWidget != "undefined" ) {
        (new otherWidget()).open();
    }
};

Notice that both methods are very similar in implementation. I would say the best way to make a determination between the two is to consider the size of your codebase, the tools available to you for compiling on the fly, and caching those role-based, compiled packages. For my project, not only was a compiler not available in the environment, but the code base was large (1.3mb inflated/296kb defaulted plus the dojo library), which wasn't acceptable as the client was more interested in maintaining low application load times.

这篇关于如何使用Ext JS作为基于角色的应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！