AngularJs Authorization and permissions on routes and views.

app.js

'use strict';

// Declare app level module which depends on views, and components
var app = angular.module('eopd', [
        'ngRoute',
        'app.directives'
        'app.services'
        ])
.config([
        '$locationProvider', '$routeProvider', '$httpProvider', 'ScrollBarsProvider', function ($locationProvider, $routeProvider, $httpProvider, ScrollBarsProvider) {

            //Reset headers to avoid OPTIONS request (aka preflight)
            $httpProvider.defaults.headers.common = {};
            $httpProvider.defaults.headers.post = {};
            $httpProvider.defaults.headers.put = {};
            $httpProvider.defaults.headers.patch = {};

            $locationProvider.hashPrefix('!');
            //$locationProvider.html5Mode({
            //    enabled: true,
            //    requireBase: false,
            //    rewriteLinks: false
            //});
           $routeProvider
          .when('/url1', {
            templateUrl: 'templateUrl1',
            controller: 'controller1',
            requireLogin: true,
            permission: ['ROLES_ARRAY']
        })
         .when('/url2', {
            templateUrl: 'templateUrl2',
            controller: 'controller2',
            requireLogin: true,
            permission: ['ROLES_ARRAY1']
        })
            $routeProvider.otherwise({ redirectTo: '/home' });

            ScrollBarsProvider.defaults = {
                scrollButtons: {
                    enable: false // enable scrolling buttons by default
                },
                axis: 'y', // enable 2 axis scrollbars by default
                scrollInertia: 400,
                theme: 'dark',
                autoHideScrollbar: false
            };

        }
])
.run([
    '$rootScope', '$location', '$route', 'permissions', function ($rootScope, $location, $route, permissions) {
      
        $rootScope.$on('Authorization Required', function () {
            //$location.path('login');
        });
           
      
      // check on routes whether the user has permission to view this url or not . And if not , then redirect to login page.
        $rootScope.$on('$routeChangeStart', function (event, nextRoute, current) {
     
          // check if the nextRoute requires the login or not . If login is required and user is not logged in then it is redirected to             login page.
            if ((nextRoute && nextRoute.requireLogin) && !$rootScope.isLoggedIn) {
                $location.path("login");
            }
            var permission = nextRoute && nextRoute.permission;
            if (permission && !permissions.hasPermission(permission)) {
                $location.path('login');
            }
        });
     
    }
]);

directive-example.html

  <div class="collapsable-field" has-permission="ROLE_SENIORDOCTOR">
    // this div will only be visible if the role is of senior doctor
  </div>
// use in this format if you want not condition
  <div class="collapsable-field" has-permission="!ROLE_SENIORDOCTOR">
    // this div will only be visible if the role is not of senior doctor.
  </div>

permission-directive.js

'use strict';

angular.module('app.directives')
      .directive('hasPermission', ['permissions', function (permissions) {
          return {
              link: function (scope, element, attrs) {
                      element.ready(function () {
                      var value = attrs.hasPermission.trim();
                      var notPermissionFlag = value[0] === '!';
                      if (notPermissionFlag) {
                          value = value.slice(1).trim();
                      }

                      function toggleVisibilityBasedOnPermission() {
                          var hasPermission = permissions.hasPermission([value]);
                          if (hasPermission && !notPermissionFlag || !hasPermission && notPermissionFlag) {
                              element.show();
                          }
                          else {
                                element.remove(); // Remove element from DOM
                          }
                      }
                      toggleVisibilityBasedOnPermission();
                      scope.$on('permissionsChanged', toggleVisibilityBasedOnPermission);
                  });
                 
              }
          };
      }]);

permission-service.js

'use strict';

angular.module('app.service')
  .factory('permissions', function ($rootScope) {
      var permissionList;
      return {
          setPermissions: function (permissions) {
              permissionList = permissions;
              $rootScope.$broadcast('permissionsChanged');
          },
          hasPermission: function (permissions) {
              var hasPermission = false;
              if (!permissionList) {
                  if (localStorage.roles && typeof(localStorage.roles).toLowerCase() == 'string')
                      permissionList = [localStorage.roles];
                  else
                      permissionList = localStorage.roles;
              }
              if (!permissionList) return false;
              angular.forEach(permissions, function (permission, index) {
                  if (!hasPermission) {
                      permission = permission.trim();
                      return angular.forEach(permissionList, function (item) {
                          if (item) {
                              hasPermission = hasPermission || item.trim() === permission;
                          }
                      });
                  }
              });
              return hasPermission;
          }
      };
  });