$state.go on onEnter function of an abstract state - angularjs

Question

I have the following UI Router configuration witch includes a login page (/login), an abstract page that will be the parent of all my admin pages (/admin) and a list page that extends from the abstract page (/admin/list):
$stateProvider
.state('login', {
url: '/login',
templateUrl: '/pub/login.html',
controller: 'LoginController',
controllerAs: '$loginCtrl',
onEnter: function () {
console.log("enter /login");
}
})
.state('admin', {
abstract: true,
url: '/admin',
templateUrl: '/tmpl/templateAdmin.html',
onEnter: function () {
console.log("enter admin abstract");
// Validate JWT here and if not authenticated forward to login
$state.go('login');
}
})
.state('admin.list', {
url: '/list',
templateUrl: '/prv/clientsList.html', // loaded into ui-view of parent's template
controller: 'AppController',
controllerAs: '$appCtrl',
onEnter: function () {
console.log("enter admin/list");
}
})
I want to implement a logic that will validate if the user is authenticated when accessing an /admin/* page. In order to do that I added an onEnter function in my abstract state so that I could use $state.go('login'). But this doesn't work. How can I do this? Is there a better way to validate authentication inside UI Router?

Answer 1

In this case, I think it's better if you used resolve instead of onEnter.
Mainly because you want to check if the user is authenticated before navigation. If the objects inside the block don't resolve then the controller passed to the state won't be instantiated.
.state('admin', {
abstract: true,
url: '/admin',
templateUrl: '/tmpl/templateAdmin.html',
resolve: {
currentUser: function (authService) {
return authService.getUser();
}
}
}
The root state would try and resolve the user for all child views nested inside.
Here's the link to the docs on Nested States and Inherited Resolved Dependencies:
https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views