javascript - loading in variable states with ui-router in angular -

i have scenario 1 of 2 default states (let's call them foo , bar) displayed after login, depending on user's permissions. have function runs on $statechangestart uses user's permissions redirect them correct screen.

foo permissions -> mybrokenapp.com/foo/dashboard
bar permissions -> mybrokenapp.com/bar/dashboard

this works when user enters via login page. if user signed in (cookie set) , visits root url (mybrokenapp.com) redirection doesn't work more.

i have debugged point i'm 99% error caused currentrole not being set when $statechangestartruns.

the routing code:

$stateprovider             .state('app', {                 templateurl: '/path/app.html',                 url : '',                 resolve: {                     authenticated: ['authservice',        function(authservice){                         return authservice.authenticationstatus(true);                     }]                 }              })              .state('app.foo', {                 abstract: true,                 template: '<ui-view/>',                 url: "/foo"             })              .state('app.foo.dashboard', {                 templateurl: '/path/dashboard.foo.html',                 url: "/dashboard",                 controller: 'dashfoo',                 controlleras: 'dashfoo'              })             .state('app.bar', {                 abstract: true,                 template: '<ui-view/>',                 url: "/bar"             })              .state('app.bar.dashboard', {                 templateurl: '/path/dashboard.bar.html',                 url: "/dashboard",                 controller: 'dashbar',                 controlleras: 'dashbar'              })              .state('login', {                 templateurl: '/path/login.html',                 url: "/login",                 controller: 'loginctrl'             }) 

the function redirects correct url based on permissions:

.run(function($rootscope, $state, authservice, userservice){         authservice.initialize('/api', true);          $rootscope.$on('$statechangestart', function (event, tostate) {             if (tostate.name === 'app') {                 if (userservice.getuserroles().currentrole == 'foo') {                     event.preventdefault();                     $state.go('app.foo.dashboard');                 }                 if (userservice.getuserroles().currentrole == 'bar') {                     event.preventdefault();                     $state.go('app.bar.dashboard');                 }             }         });     }); 

any ideas on how fix issue, or alternative route design still provides same functionality appreciated.

please check answer have given in question. provides alternative , arguably better design angular authentication , access control

in answer u can extend boolean authenticate parameter according needs. , authenticating service invoked @ $statechange event.