Control Access to Flex Components with Group Based Permissions

When building a large application which has many different views it's likely that you'll want to grant some users more access than others. You might have some components that all guests are permitted to view and also have other components that only admin users are allowed to use.

A common way to accomplish this is to assign all users to different user groups and then control what user groups are allowed to view certain parts of your application.

The example I show here focuses only on controlling the 'visible' property of a component and therefore only addresses what interface elements the user is allowed to see. I plan to expand on this example in the future to also address the user's ability to access specific sets of data.

Permit and PermitCondition Classes

In order to have a central repository of permissions and information on the current user I created a singlton class called Permit and another class called PermitCondition. Using a singlton ensures that only one instance of the class will be created and can still be easily accessible anywhere in your application.

The Permit class keeps information on the current user and is responsible for creating instances of the PermitCondition class.

Each instance of PermitCondition defines a single permission requirement for a single component by declaring if a specific user group is allowed to view the component or is explicitly blocked from viewing the component. Components can have multiple PermitConditions allowing for more complex permissions.

Summary of Example Application

View the demo : View demo source

In my example application I define permissions for 3 sample components in the main MXML application file. I then use a LogIn component which sets the user's group memberships. Both the main MXML application and the LogIn component use the same singlton instance of the Permit class.

For the purpose of keeping this example simple my LogIn component manually sets users group permissions from a couple of simple functions. In a more complete application you would want your LogIn component to accept a username and password and define user groups after calling an HTTPService and likely querying a database.

Creating and Accessing the Permit Class

Use the following code to get access to the Permit singlton.

import claire.libs.Permit;
private var appPermit:Permit = Permit.getInstance();

Defining Component Permissions

Use the following code to define permissions for individual components

appPermit.applyPermit('adminaccess',Permit.ALLOW,'admin',box3);
appPermit.applyPermit('adminaccess',Permit.BLOCK,'guest',box3);

The applyPermit method accepts 4 properties

applyPermit( permitname:String, condition:String, group:String,component:UIComponent)

• permitname : A unique identifier for the declared permit.
• condition: Accepted values are Permit.ALLOW or Permit.BLOCK. Determines if the supplied group name is granted or blocked access to component.
• group: Name of a user group checked in the condition.
  
• component: a UIComponent which the permit is applied against.
  

Adding User Details to the Permit Class

Use the following code to add user details to the Permit class after successfully validating the user's username and password.

appPermit.loggedIn = true;
appPermit.addGroup('guest') // Adds user to group 'guest'

When a user is added to a group the Permit class will automatically check PermitConditions and update the visible property of components.