Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angularjs ui-router authorization and authentication for different roles using same url

I'm developing an app in angularjs using ui-router. I've followed https://github.com/alarv/ng-login repository to handle authorization and authentication.

I have 3 user roles handling 3 different roles, but has access to same type of information (structure of information is the same) with different paths. Let the roles be "ADMIN","MANAGER","USER". All of them are having dashboard, with same type of information. ADMIN will be having consolidated info while other ROLES have lower level information, but all of them are accessing the dashboard. So, I configured the states like this

$stateProvider
    .state('admin-dashboard', {
      url: "/admindb/:entity/:id/dashboard",
      templateUrl: 'js/modules/dashboard/template/dashboard.html',
      controller:'dashboardCtrl',
      data: {
          authorizedRoles: [USER_ROLES.APP_ADMIN, USER_ROLES.ADMIN]
      }
    })
      .state('manager-dashboard', {
      url: "/managerdb/:entity/:id/dashboard",
      templateUrl: 'js/modules/dashboard/template/dashboard.html',
      controller:'dashboardCtrl',
      data: {
          authorizedRoles: [USER_ROLES.APP_ADMIN, USER_ROLES.ADMIN, USER_ROLES.MANAGER]
      }
    })
      .state('user-dashboard', {
      url: "/userdb/:entity/:id/dashboard",
      templateUrl: 'js/modules/dashboard/template/dashboard.html',
      controller:'dashboardCtrl',
      data: {
          authorizedRoles: [USER_ROLES.APP_ADMIN, USER_ROLES.ADMIN, USER_ROLES.MANAGER, USER_ROLES.USER]
      }
    })

The problem is that I am accessing the variable ':entity' in controller to identify the user level. This doesn't feel right. For now, this mechanism works. But, I want to know if there is a better approach.

I wonder if it is possible to have a single url like "/:id/dashboard" and handle all different roles. Basically, I used admindb,managerdb, etc in url just to manage authorization (based on user role).

edit: There was no need of using :entity variable, as it was possible to access $state.current.name to get the current state's name.

like image 704
Raghu Venmarathoor Avatar asked Mar 10 '26 11:03

Raghu Venmarathoor


1 Answers

Well if you set the authorizedRoles variable to a global variable using AngularJS's value recipe, it could be injected as a dependency to any controller.

Create a value recipe

var myApp = angular.module('myApp', []);
myApp.value('clientId', 'a12345654321x');

Display using Angular's data-binding

myApp.controller('DemoController', ['clientId', function DemoController(clientId) {
  this.clientId = clientId;
}]);


<html ng-app="myApp">
  <body ng-controller="DemoController as demo">
    Client ID: {{demo.clientId}}
  </body>
</html>

More info here: https://docs.angularjs.org/guide/providers

like image 52
NSTR Avatar answered Mar 12 '26 03:03

NSTR



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!