Initialize AngularJS config block with asynchronous data

Question

While defining the routes of an AngularJS application, in order to indicate what access level each route should have, a new property called access has been added to each route. This is based on a Client-Side authorization approach described here.

The .config block would look like the following:

app.config(['$routeProvider', '$locationProvider', '$httpProvider',
  function ($routeProvider, $locationProvider, $httpProvider) {

      var access = routingConfig.accessLevels; //Initialize with asynch data instead

      $routeProvider.
        when('/home', {
            templateUrl: '/Templates/home.html',
            controller: 'homeController',
            access: access.user
        });
      $routeProvider.
      when('/private', {
          templateUrl: '/Templates/private.html',
          controller: 'adminController',
          access: access.admin 
      });

      //...more route configurations

   }]);

Leaving the core logic of the approach aside, I just want to know in general how can we initialize the access variable with some asynchronous data so that it is available while defining the access property for each route? This is needed because only the server has knowledge of the list of access levels.

Although there are answers to Initialize AngularJS service with asynchronous data based on exposing a promise in the service & using resolve in route config, it won't work in my case as I need the asynchronous call to be resolved before defining the route configuration because the access property depends on the asynchronous data.

What options do I have? Can the promise/deferred approach still be used somehow?

Any suggestion would be much appreciated.

EDIT :

To describe what access is doing a bit, it is being populated by a separate module called routingConfig. In the approach, a user can belong to a certain role which is defined as a binary number. For e.g public : 001, user : 010, admin : 100 (and so forth).

The access level for any route will again be a binary number defined by the OR operation of all user-roles that are allowed to access it. So for e.g. if the user access-level can be accessed by user-roles user(010) and admin(100), its bitmask would be 110. Later to check access on a route, we can do a AND operation on the user-role and access-level to see if it is authorized or not. Details can be seen in the above link.

Note that data at the server end is still secure by more complex algorithms, so even if the above logic is manipulated with at the client-side, such a user would only be able to see the markup of any unauthorized page.

Again, coming back to the problem in hand. How can access which is being used as a property in the config block be initialized with asynchronous data that comes from the server. This data may look like the following:

accessLevels : {
    'public' : '111',
    'user' : '110',
    'admin': '100'
}

I'm assuming that you have tested a service to fetch the `access` but for some reason when you use it with your $routeProvider `access` property the reference is lost and whatever you use `access` later you don't have the update value? This looks weird in a first look for me. — Everton Yoshitani, Nov 28 '13 at 22:54
Could you specify what exact information do you need to load `access` (or describe broadly some scenarios)? (I have a couple of ideas, but all of them are far from being elegant) — artur grzesiak, Nov 28 '13 at 23:02
The problem here is that the `$routeProvider` must be registered _before_ the application `runs`. The way we handle this is to define the routes just the same, but set the right access level in the `module.run` function and make the links inaccessible through the UI. If a user gets to these links, he sees a nice 401 error in the app and is requested to log in with higher privileges using a modal box. This is handled via `$http` interceptors. — musically_ut, Nov 28 '13 at 23:26

score 2 · Answer 1 · answered Nov 30 '13 at 00:27

So if I understood you correctly the application should be unresponsive until the access is available. So what is the point to grab access asynchronously, anyway?

Maybe such approach is appropriate [for sure in many similar cases it should be]:

<script src="angular.js"></script>
<script>
 angular.module('config').constant(
    <%= // JSON.stringify your config and access %>
 );
</script>
<script src="app.js"></script>

If you really have to done it asynchronously then with XHRHttpRequest or some other way grab the access and bootstrap your application manually.

knoefel · Answer 2 · 2014-01-20T19:39:56.470

Not sure if you solved your problem in the meantime, but i was facing the same problem some time ago. My solution was to use a main controller on the html tag together with ng-app. Inside the controller i used the received access-levels data from my server and defined my routes there with the help of $route. So the data is accessible before you define your routes configuration. You could of course also call the promise then function from the Auth factory inside the controller and define your routes there.

view:

<html ng-app="app" ng-controller="MainController">
 ...
</html>

controller:

var MainController = ['$scope', '$http', '$route', 'Auth', function ($scope, $http, $route, Auth) {
    var accessLevels = Auth.accessLevels;

    $route.routes['/index'] = {templateUrl: "pages/index", controller: IndexController, access: accessLevels.guest};
    ....
    $route.routes['null'] = {redirectTo: '/index', controller: IndexController};

Initialize AngularJS config block with asynchronous data

2 Answers2