Role based access control of Mean stack web app

Question

I am working on a mean stack web application which contains differential access based upon the logged user's role. there are few different roles such as admin, govt, volunteer etc.

1. how to manage the front end based upon the role?

currently i am setting global flags such as isAdmin, isVolunteer, isGovt etc for each role and based upon their value, i am able to show different UI using data-ng-if = "Global.isAdmin"

Is this aproach is correct. if not please suggest the correct way to handle UI.

2. how to manage the back-end and redirect the route if the user did'n have authorization?

currently i am trying to use angular-permission and rbac but still unable to use these successfully in my application. can anyone tell me the best practice for role based access control for mean stack web app.

while trying to use the angular-permission, i was unable to link the created roles to route file.

this is role module.

angular.module('mean.users', ['permission'])
.run(['permission', 'Global', '$q',
    function(Permission, Global, $q) {
        console.log('not anonumous');
        Permission
            .defineRole('anonymous', function(stateParams) {
                var deferred = $q.defer();
                if (Global.user) {
                    deferred.resolve();
                } else {
                    deferred.reject();
                }
                return deferred.promise;
            })
            .defineRole('admin', function(stateParams) {
                if (Global.isAdmin) {
                    deferred.resolve();
                } else {
                    deferred.reject();
                }
                return deferred.promise;
            })
            .defineRole('govt', function(stateParams) {
                if (Global.isGovt) {
                    deferred.resolve();
                } else {
                    deferred.reject();
                }
                return deferred.promise;
            })
            .defineRole('volunteer', function(stateParams) {
                if (Global.isVolunteer) {
                    deferred.resolve();
                } else {
                    deferred.reject();
                }
                return deferred.promise;
            });

    }
]);

how to link above configoured roles in route file

$stateProvider
        .state('create user', {
            url: '/users/create',
            templateUrl: 'users/views/create.html',
            resolve: {
                loggedin: checkLoggedin
            }
        })
        .state('all users', {
            url: '/users/list',
            templateUrl: 'users/views/list.html',
            data: {
                permissions: {
                     only: ['admin'],
                    redirectTo: 'home'
                }
            }
        })
        .state('show user', {
            url: '/users/:userId/view',
            templateUrl: 'users/views/view.html',
            resolve: {
                loggedin: checkLoggedin
            }
        })
        .state('edit user', {
            url: '/users/:userId/edit',
            templateUrl: 'users/views/edit.html',
            data: {
                permissions: {
                     only: ['admin']
                }
            }
        })
        .state('myprofile', {
            url: '/users/:userId/me',
            templateUrl: 'users/views/myprofile.html',
            resolve: {
                loggedin: checkLoggedin
            }

        });

Answer 1

From your code samples I guess you are using mean.io.

This is my approach to role based access control on the frontend, in mean.io.

First of all, I add the roles to some users, so that they exist in the database and I can use them.

$ mean user a@example.com --addRole production
$ mean user b@example.com --addRole sales

Then, I have 2 routes to add to the menu. In app.js of my custom module I filter this routes by role, so that the link isn't shown to other roles:

Report.menus.add({
  roles: ['production'],
  title: 'Production reports',
  link: 'production reports'
});
Report.menus.add({
  roles: ['sales'],
  title: 'Sales reports',
  link: 'sales reports'
});

Of course, this is not enough to restrict access in the frontend. You could easily point to http://localhost:3000/#!/report/sales and you would see the sales report whether you have the sales role or not.

The trick comes in the public/routes/report.js file of my custom module, where I filter the views by role.

'use strict';

angular.module('mean.report').config(['$stateProvider',
  function($stateProvider) {
    // Check if user has role
    var checkUserRole = function(role, $q, $timeout, $http, $location) {
      // Initialize a new promise
      var deferred = $q.defer();

      // Make an AJAX call to check if the user is logged in and get user data including roles
      $http.get('/loggedin').success(function(user) {
        // Authenticated
        if (user !== '0' && (user.roles.indexOf(role) > -1 || user.roles.indexOf('admin') > -1)) $timeout(deferred.resolve);

        // Not Authenticated
        else {
          $timeout(deferred.reject);
          $location.url('/auth/login');
        }
      });

      return deferred.promise;
    };

    $stateProvider.state('report', {
      url: '/report',
      templateUrl: 'report/views/index.html'
    })
    .state('production reports', {
      url: '/report/production',
      templateUrl: 'report/views/production.html',
        resolve: {
          loggedin: function($q, $timeout, $http, $location) {
                return checkUserRole('production', $q, $timeout, $http, $location)
            }
        }
    })
    .state('sales reports', {
      url: '/report/sales',
      templateUrl: 'report/views/sales.html',
        resolve: {
          loggedin: function($q, $timeout, $http, $location) {
                return checkUserRole('sales', $q, $timeout, $http, $location)
            }
        }
    });
  }
]);

In case the user is unauthenticated, he is re-directed to the login page. If he has the wrong role, he is redirected to the home page.

This approach is based on the articles module. Hope it helps.