AngularJS [UI-Router] urlRouteProvider.when() versus resolve for routing to child states

问题

In my app I have a state called 'dashboard' with multiple child states

.state('dashboard', {
    url: '/dashboard',
    abstract: true,
    // resolve async objects before controller instantiation.
    resolve: {
        productResolve: function ($state, authService, cacheService, productService) {
            var cache = cacheService.getCache();
            if (cache.length === 0){
                return productService.getProductsAndCommoditiesAsync(authService.getCredentials().roleID)
                    .then(function(productData){
                        cacheService.setCache(productData);
                    },
                    function(errorMessage){
                        $state.go('error',{errorMessage:errorMessage});
                    });                         
            }               
       }
    },        
    templateUrl: '/static/app/partials/dashboard.html',
    controller: 'dashboardCtrl',
})
// parent state: dashboard
.state('dashboard.splash', {
    templateUrl: '/static/app/partials/dashboard.splash.html',
    controller: 'dashboard.splashCtrl'
})
// parent state: dashboard
.state('dashboard.podSelector', {    
    // params array can be used instead of url to populate $stateParams
    params: ['productIndex', 'commodityIndex'],
    templateUrl: '/static/app/partials/dashboard.pod-selector.html',           
    controller: 'dashboard.podSelectorCtrl'

Which child state the user will be redirected to depends on his/her session cookie, and I was curious where the appropriate place was to do the redirecting.

One option I can think of are either to set the parent dashboard state to be not abstract so it is able to be navigated to, then check the session from within the dashboard parent resolve promise, and do a $state.go to a child depending on the result. I ideally would like to keep the dashboard parent state abstract as its useless on its own, but if it always will redirect to a child state then I guess its not important if it is.

The alternative I was thinking of is to handle it with a $urlRouterProvider.when(), something like:

$urlRouterProvider.when('/dashboard', function($state, sessionService){
    if (sessionService.getSession() === undefined) {
        $state.go('dashboard.splash');
    }
}); 

This seems cleaner and a more logical place to put it, but say if I'm transitioning to the dashboard state from a login state, if I redirect in the resolve I can transition from the login page with a $state.go('dashboard') while if I use $urlRouterProvider I need to do a $location.path('/dashboard'), which I don't know how much transitioning to states with location paths versus $state.go is frowned upon.

Any advice would be appreciated.

回答1:

Which child state the user will be redirected to depends on his/her session cookie, and I was curious where the appropriate place was to do the redirecting.

In general, if you want to drive navigation based on app state or session state, I would suggest you use a service to intercept the $stateChangeStart event and send them where they should be.

So, in your app's module.run callback, you could say:

$rootScope.$on('$stateChangeStart', function(event, toState) {
  if (toState.name === 'dashboard') {
    event.preventDefault();

    switch (myCondition) {
      case 1:
        $state.go('dashboard.splash');
        break;
      case 2:
        $state.go('dashboard.podSelector');
        break;
      default:
        $state.go('somewhereElse');
        break;
    }
  }
});

This way, you don't let the transition take costly time and energy by going to a state that you never intend to stay on, and you don't rely on $urlRouter.when.

来源：https://stackoverflow.com/questions/20481503/angularjs-ui-router-urlrouteprovider-when-versus-resolve-for-routing-to-chil