AuthN/AuthZ Pattern w/DoneJS

DoneJS
1

I am still working on grasping the concepts of DoneJS.

I particularly like the routing:

/:page/:stub/:action

Most of the things I develop require Authentication/Authorization before site functionality can shown.

From a routing perspective, let’s say we have 4 pages/routes:

/login
/home
/chat
/chatAdmin (secured)

If a User is NOT Authenticated, then they should be routed to the login page.

Once User is Authenticated, then the User should be routed to the home page.
Any Authenticated user will have access to the chat page.
A User must be granted the Chat Admin role to have Authorization to view the chatAdmin page.

After successful User Authentication a User Profile object is returned by the Authorization Service containing basic User Info (Name, email, etc) and a list of granted Roles.

The User is then routed to the home page…

In the Nav Bar, Home and Chat are always visible.
Yet ChatAdmin would only be visible if the User was granted the ChatAdmin role.

What type of DoneJS pattern would you recommend to support the above use case?
And/or do you have any examples that might show how to support such a pattern.

Note: It is possible that the UserProfile roles might be used within a Page, View and/or Route to grant/restrict access based on Authorization rules. In such a scenario, the UserProfile object would need to be accessible throughout the code. Would we need to make UserProfile a global object and/or are there any scoping rules that we may need to be aware of here?

Any assistance/information/examples is greatly appreciated!!
Thanks

2

The can-interrupt (can.transaction) plugin can be used to prevent setting a state on the route if the user should not be allowed to access it.

Using a Profile object throughout the app

One place to store a profile object is the route / application viewmodel. It will be accessible in the templates of all your Components as long as they are leakScope:true (default). Just make sure to set serialize:false on it or it will appear in the URL.

var AppViewModel = can.Map.extend({
  define: {
    profile: {
      serialize: false
    }
  }
});

var appViewModel = new AppViewModel();

can.route('/:page/:stub/:action');
can.route.map(appViewModel);
can.route.ready();

// log the user in somehow
loginUser().then(function(profile) {
  appViewModel.attr('profile', profile);
});

$('body').html(siteStache(appViewmodel));

Then in some deeply nested Component’s template, profile should be available.

If you want to use the profile in a Component’s viewModel, you can use this.attr('%root.profile') or can.route.attr('profile').

Hiding UI Based on Access Control

Conditionally showing a part of the UI can easily be done with a helper that references the application viewmodel.

{{#hasAccess 'viewReports'}}
  <my-reports></my-reports>
{{/hasAccess}} 

can.stache.registerSimpleHelper('hasAccess', function(accessFlag, options) {
  var hasAccess = can.route.attr('accessFlagMapping').attr(accessFlag);
  return (hasAccess) ? options.fn() : options.inverse();
});
3

I don’t have time to do a good job of explaining, but in other apps, I’ll leave the route as is, but show the login page. I have a function like:

That provides what component/page should be rendered. To make login work, I could have easily added a wrapping if like:

if(this.attr("session")) {
  //EXISTING CODE
} else {
  return "login-page"
}