PDA

View Full Version : Access control using Spring Security in ExtJS client?



kingcu
4 Apr 2011, 4:20 AM
I am using Grails 1.3.7, Spring Security Plugin for Grails, and ExtJS 3.3.1. I will have about 20 roles in my app and use static URL rules to secure my controller layer. My client side will be all ExtJS, as I just started with ExtJS, I'd like to check with you folks there and find out what is the proper way of integrating access control into ExtJS client side. Basically, how to organize the code that determines which part of the UI to display for a given user? And further more, some form maybe read-only for some users.

Grolubao
4 Apr 2011, 8:42 AM
The way I did it was to create a javascript array with all the permissions the user has, and then a plugin that is connect to any component that will determine if the user can see or not see that particular component.

The other option is to use the spring security tags

kpatel.hms
27 Feb 2012, 2:51 PM
I am new to ExtJS. I have the javascript array with all the priviliges the user has. Now how do I plugin that to the component to determine if the user can see or not see that particular component? can you write small code sample?

Grolubao
28 Feb 2012, 12:59 AM
Here it is:



Ext.ns('Mine.security');

/**
* Plugin used to check the component has all the permissions provided.
*
* Usage:
*
* This checks only for one permission
*
* var button = new Ext.Button({
* plugins: new Mine.security.AllGranted('PERM_LOGIN')
* });
*
* This checks only for all permissions
*
* var button = new Ext.Button({
* plugins: new Mine.security.AllGranted(['PERM_LOGIN','PERM_DASHBOARD'])
* });
*
*
*/
Mine.security.AllGranted = function(permissions) {
return {
constructor : function(config) {
if (!Ext.isDefined(Permissions)) {
throw 'Permissions object should exist. Please add the permissions.jsp';
} else if (Ext.isEmpty(permissions)) {
throw 'In order to check permissions, some need to be passed as argument';
}
},

init : function(component) {
var found = false;
if (!Ext.isArray(permissions) && Permissions[permissions]) {
found = true;
} else {
var size = permissions.length;
var permissionsFound = 0;
Ext.each(permissions, function(permission) {
if (Permissions[permission]) {
permissionsFound++;
}
});
found = (permissionsFound == size);
}
Ext.apply(component, {
hidden : !found
});
}
};
};






Ext.ns('Mine.security');

/**
* Plugin used to check the component has at least one of the permissions provided.
*
* Usage:
*
* This checks only for one permission
*
* var button = new Ext.Button({
* plugins: new Mine.security.AnyGranted('PERM_LOGIN')
* });
*
* This checks only for all permissions
*
* var button = new Ext.Button({
* plugins: new Mine.security.AnyGranted(['PERM_LOGIN','PERM_DASHBOARD'])
* });
*
*
*/
Mine.security.AnyGranted = (function(permissions) {
return {
constructor : function(config) {
if (!Ext.isDefined(Permissions)) {
throw 'Permissions should exist. Please add the permissions.jsp';
} else if (!Ext.isDefined(permissions)) {
throw 'In order to check permissions, some need to be passed as argument';
}
},

init : function(component) {
var found = false;
if (!Ext.isArray(permissions) && Permissions[permissions]) {
found = true;
} else{
Ext.each(permissions, function(permission) {
if (Permissions[permission]) {
found = true;
return false; //To exit the loop, same as break in java
}
});
}
Ext.apply(component, {
hidden : !found
});
}
};
});