Angular - same urls with different templates (ui-router) - angularjs

Question

I have a scenario, where many of the urls are accessible while logged in and out as well. I was thinking of having a parent state where I can handle the necessary resolving (getting user info if logged in, etc.) and all of the state would be a child of this root state. Then in the templates I can do ng-if for elements depending on user status. This is all good, except one thing: The API server sends 401 responds when the access token is invalid which causes the state not to load.
I would really like to solve this issue while keeping the HTTP responds.
Basic example:
Root state:
$stateProvider.state('base', {
controller: 'BaseController',
controllerAs: 'vm',
template: '<ui-view layout="row" flex />',
abstract: true,
resolve: {
me: function (userService) {
return userService.me();
}
},
data: {
auth: false
}
});
Home state:
$stateProvider.state('base.home', {
controller: 'HomeController',
controllerAs: 'vm',
url: '/home',
templateUrl: 'home/home.html',
data: {
auth: false
}
});
What I would like to do is even if me resolves to 401 still load the controller/template WHEN the data.auth is false. Otherwise I would just $state.go('login') or something like that.

Answer 1

What's happening is UI-Router is getting the 401 response from your Ajax call, in which case it won't be able to resolve me, and doesn't load the state. You need to wrap your ajax call in another Promise, that way you can handle the 401, and still resolve the Promise, just resolve it with null.
$stateProvider.state('base', {
controller: 'BaseController',
controllerAs: 'vm',
template: '<ui-view layout="row" flex />',
abstract: true,
resolve: {
me: ['userService', function (userService) {
return userService.me().catch(function(error) {
//user is not logged in, but eat the error so
//the state still loads, just with user = null
return null;
});
}]
},
data: {
auth: false
}
});