Angular UI-Router,访问父状态并动态地将用户重定向到某个子状态

Question

我有一个通过访问URL到达的主状态http://myapp/validate.

在到达此URL时,在控制器内部进行权限检查,并将用户重定向到两个子状态之一.

这有效,80%满意,但使用一些资源,并在我的应用程序中导致一个小闪烁,因为基本上我加载一个我不使用的视图.

有没有更好的方法来实现这一目标？

有任何想法吗？

angular.module('app.validate').config(['$stateProvider', function($stateProvider) {
    $stateProvider
        .state('validate', {
            url: '/validate',
            template: '<ui-view/>',
            controller: ['$state', 'HasPermission', function ($state, HasPermission) {

                // Here is where I do my logic.

                if (HasPermission.get('can-lock-as-admin')) {
                    $state.go('validate.lock-as-admin');
                }

                if (HasPermission.get('can-lock-as-clerk')) {
                    $state.go('validate.lock-as-clerk');
                }
            }]
        })
        .state('validate.lock-as-admin', {
            templateUrl: 'theUrl',
            controller: 'ValidateLockAdminCtrl'
        })
        .state('validate.lock-as-clerk', {
            templateUrl: 'theUrl',
            controller: 'ValidateLockClerkCtrl'
        })
        .state('validate.commit', {
            templateUrl: 'theUrl',
            controller: 'ValidateCommitCtrl'
        });
}]);

Answer 1

闪烁的原因是,在将用户http://myapp/validate移动到正确的路径之前,您实际上正在让用户访问.
您可以通过将他重定向到正确的路径而不显示父路由来避免这种情况.

app.run(function($rootScope){

  $rootScope.$on('$stateChangeStart', 
    function(e, toState, toParams, fromState, fromParams), {
      if(toState.name === 'validate') { // some conditional
        e.preventDefault(); // This tells the app not to move to the validate route

        if (HasPermission.get('can-lock-as-admin')) {
           $state.go('validate.lock-as-admin');
        }
        if (HasPermission.get('can-lock-as-clerk')) {
           $state.go('validate.lock-as-clerk');
        }
      }
    });
  });

});  

为了获得更清晰的解决方案,你可以使用一个resolve检查权限的块,但我不是100%关于这个,我现在没有时间检查它.
我建议你看看这篇文章,因为它以一种很好的方式解释了类似的场景.