$state.go 不符合承诺

Question

我正在尝试实施基本的安全检查，以根据用户的权限集阻止用户访问某些状态：

'use strict';

var autoExecApp = angular.module("myApp", ['ui.router']);

autoExecApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
    $stateProvider
        .state('index', {
            url: '/index',
            templateUrl: 'partials/index.html'
        })
        .state('permission', {
            url: '/permission',
            templateUrl: 'partials/permissions.html'
        });
}]);

autoExecApp.run(['$rootScope', '$state', '$userRoles', function($rootScope, $state, $userRoles) {

    $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {

        event.preventDefault(); // prevent page from being loaded anyway
        $userRoles.hasPermissions(toState.name).then(function(data) {
            var result = data === "true";
            if (!result) {
                $state.go('permission');
            }
            else {
                $state.go(toState.name, toParams ,{notify:false});
            }
        });
    });
}]);

现在的问题是我的状态改变发生在一个 promise 内。我很乐意让它同步 - 在这种情况下确实应该如此，但我很困惑为什么它不能异步工作。

如果我移动event.preventDefault()承诺的内部，它会起作用。但是状态变化分 2 步。首先，它将始终转到原始页面，然后在过渡到“已阻止”页面（如果已被阻止）后不久将转到原始页面。我认为这是因为它从 $on 成功返回一次并更新状态，然后在从承诺返回时再次更新它。

然而，如果承诺是你所看到的，状态不会改变。一切似乎都在工作，但页面不会更新视图。我不确定为什么会这样。出于某种原因，如果不阻止该事件，则稍后的状态更改将起作用。但是，如果它被阻止并且从返回的承诺中调用 $state.go，那么更新 $state 似乎为时已晚。

编辑：我使用广播解决方案取得了成功，这就是它的样子：

event.preventDefault();
$state.go(toState.name, toParams, {notify: false}).then(function() {
     // line 907 state.js
     $rootScope.$broadcast('$stateChangeSuccess', toState, toParams, fromState, fromParams);
});

显然是因为它在承诺中， preventDefault(); 抑制这个 '$stateChangeSuccess' 自然触发。手动执行它会恢复预期的行为。

Answer 1

它是一个已知问题。通常有效的解决方法是从“$stateChangeStart”处理程序中广播自定义事件，然后从该自定义事件的处理程序中进行状态转换。

$rootScope.$on('$stateChangeStart', function (event, toState, toParams) {

    event.preventDefault(); // prevent page from being loaded anyway
    $userRoles.hasPermissions(toState.name).then(function(data) {
        var result = data === "true";
        if (!result) {

            $rootScope.$broadcast('goToPermission');
        }
        else {
            $rootScope.$broadcast('goToState', toState.name);
        }
    });
});

借用自：https : //github.com/angular-ui/ui-router/issues/178#issuecomment-49156829