ExtJS and page authorization (server-side)

I'm looking for information on how to implement secure pages using ExtJS 4. By secure pages I mean the user will log into our website using Siteminder (SSO) and so we will have the user's identity. Then we would determine what roles the user would have by making a database/LDAP call and only render those views/components that the user has access to.

Several questions come to mind:

1.) Of course I would expect we would do the authorization check prior to rendering the pages on the server-side, so how do you do this prior to firing Ext.onReady()? I need to have the ExtJS wait for the response from the server?

2.) What is the best way to organize a page's components where the case may be someone could see a particular component and another person cannot?

3.) How do I deliver the resulting page (i.e., the pieces the user has access to) to the client?

TIA!

Solution

Use a server side technology to pre-process authorization by putting your JS App launch script into a JSP/GSP. What this does is forces server side components to kick off first and then render the HTML/JS/CSS to the client. For full RIA app use index.gsp(or jsp) and the your URL stays "domain/contextroot" .
You can interrogate access privs to content via ajax request to server or alternatively you could set JS variables via again JSP technology that is processed first before the rest of the client response is returned.

< g:javascript>

  //global env var definition 
   var env = "${System.getProperty(Environment.KEY)}";

< /g:javascript>

Both of these are not 100% safe as client side code can be altered. The real security enforcement must be handled on server side when data is submitted for processing.

'3. Easy way would be to hide/show views etc based on 2. above. There are also some experimentation out there with modularizing the client side MVC application by lazy(manually) initializing controllers that may or may not be needed.

Hope this helps.

DB :)