angularjs: conditional routing in app.config

Question

I'm facing an issue in angular.js ui-router and not able to sort it out .

Issue:

I want user to access all routes defined in config if the user is EnterpriseAdmin and restrict some routes if the user is Enterprise user.

Routes are defined in config:

 var adocsModule = angular.module('myApp', ['ngResource', 'ngRoute','ui.bootstrap','ui.router', 'ngAnimate']) 
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
   $stateProvider.state('Registration', {
        url: "/Registration",
        templateUrl: '/Scripts/App/Registration/Templates/registration.html', controller: 'CoursesController'
    })
    .state('Registration.Instructors', {
         url: "/Instructors",
         templateUrl: '/Scripts/App/Instructors/Templates/instructors.html', controller: 'InstructorController'
    })
    .state('Registration.Courses', {
         url: "/Courses",
         templateUrl: '/Scripts/App/Instructors/Templates/courses.html', controller: 'CoursesController'
    })

Can someone help me solve this issue because as per my understanding app.js is loaded before all controllers . Surely I can check in the controller if the user is either EnterpriseAdmin or Enterprise user but up to that time all routes are already configured and the user has access to them.

Is there any way that I can do ajax call in the config block and then define a global variable and then by checking it i can configure some routes or not ??

Any help will be appreciated Regards

Answer 1

$stateProvider.state has a data property. One way is to add auth option to your states.

$stateProvider.state('Registration.Instructors', {
     url: "/Instructors",
     templateUrl: '/Scripts/App/Instructors/Templates/instructors.html', 
     controller: 'InstructorController',
     data: { auth: "EnterpriseAdmin"}
})

then you can listen to event fired by ui-router before any state starts loading and prevent it if the user is unauthorized:

app.run(function($rootScope, user){
  $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
    if ( toState.data.auth === 'EnterpriseAdmin' && !user.isAdmin() ) {
        event.preventDefault();
        return false;
    }
  })
});

You can even redirect him to another state, based on your ui logic:

 $state.transitionTo('login');