Marco Pereira Marco Pereira - 4 months ago 35
AngularJS Question

Angularjs Permissions user types

I am building an AngularJS application. In the backoffice of the application, depending of the type of user/account (admin, premium, free) the user will have different permissions (2 types).


  1. The restricted area (ex: sidebar) is visible, but if a user clicks on one of the links, it will open a modal that says something like "buy the premium version".

  2. The restricted area is invisible.



I am thinking of using a combination of services and directives to be applied in elements, but I am not really sure the best path to take, since I would like a feature that could be expanded later on.

I hope someone will be able to give me some advice on how to achieve my goals.

Dashboard layout example:
enter image description here

Answer

I assume you have the user data stored somewhere in a service or controller. I'd drive all the visibility simply by using ng-if

<restricted-content ng-if="vc.user.isPremium">

No need to create additional directives there.

As for the sidebar content. If you go the directive route, I'd recommend doing something with a directive that has the following:

  • higher directive priority than default
  • listens for the click event on the element whereby:
    • if the user's permissions check out do nothing, otherwise
    • call event.preventDefault() and event.stopImmediatePropagation() then
    • use a service to launch your "sign up for premium" modal

pseudo code:

.directive( 'premiumContent', [
     'popupService',
     'sessionService',
     function( popupService, sessionService ){

          return {
              restrict: 'A',
              priority: -1,
              link: function( $scope, elem, attrs ){

                   elem.on( 'click', function( evt ){
                        if ( !sessionService.user.isPremium )
                        {
                             evt.preventDefault()
                             evt.stopImmediatePropagation()

                             $scope.$apply( function(){
                                  popupService.show( ... )
                             })
                        }
                   }
              }
          }
     }
])

implementation:

 <sidebar-content-item  ng-click="vc.contentClick()"  premium-content>

Here is an example (coffeescript + jade) - http://codepen.io/jusopi/pen/qNooZj?editors=1010

Comments