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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With