AngularJS：两次 stateChangeStart 并且没有 stateChangeSuccess

Question

我尝试开发一个简单的代码来管理用户角色。我的后台的某些部分不允许访客使用，但允许管理员使用，并且我在运行功能中遇到了“stateChangeStart”问题。

1. 登录后台
2. 重定向到 /dashboard（在 chrome 控制台中：“stateChangeStart”、“stateChangeSuccess”）
3. 用户点击“用户管理”链接，但不允许他查看内容，因此他被重定向到 /forbidden（在 chrome 控制台中：“stateChangeStart”、“stateChangeSuccess”）
4. 用户再次点击“用户管理”，但与3相同。他看不到内容但在chrome控制台中：“stateChangeStart”，“stateChangeStart”

你知道这个问题吗？

这是我的代码：

我的 run.js：

var stateChangeStartEvent = $rootScope.$on('$stateChangeStart', function ()
        {
            console.log("ok start event");
            $rootScope.loadingProgress = true;
        });

        // De-activate loading indicator
        var stateChangeSuccessEvent = $rootScope.$on('$stateChangeSuccess', function ()
        {
            console.log("ok change event");
            $timeout(function ()
            {
                $rootScope.loadingProgress = false;
            });
        });

        // Store state in the root scope for easy access
        $rootScope.state = $state;

        // Cleanup
        $rootScope.$on('$destroy', function ()
        {
            stateChangeStartEvent();
            stateChangeSuccessEvent();
        });

        $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams)
        {
            var authorizedRoles = toState.roles.authorized;

            if (toState.authenticate)
            {
                var isAuthorized = authService.isAuthorized(authorizedRoles);
                var isAuthenticated = authService.isAuthenticated();

                if (!isAuthorized) {
                    event.preventDefault(); 
                    if (!isAuthenticated)
                    {
                        $rootScope.$broadcast('auth.not_authenticated');
                        $state.transitionTo('app.auth_login');
                    }
                    else
                    {
                        $rootScope.$broadcast('auth.not_authorized');  
                        $state.transitionTo('app.auth_forbidden');
                    }
                    return;
                }

            }
        });

isAuthorized 函数：

 function isAuthorized(authorizedRoles)
        {

            ... // get my current user and data here

            if (!angular.isArray(authorizedRoles)) {
                authorizedRoles = [authorizedRoles];
            }

            var isAllAuthorized = authorizedRoles.indexOf("all");

            if (isAllAuthorized !== -1)
                return true;


            var isUserAuthorized = authorizedRoles.indexOf(currentUser.role);
            if (isUserAuthorized == '-1')
                return false;
            else
                return true;
        }

用户管理模块：

(function ()
{
    'use strict';

    angular
        .module('app.users-management', [])
        .config(config);

function config($stateProvider, msNavigationServiceProvider, USER_ROLES)
    {
        // State
        $stateProvider.state('app.users_management', {
            url      : '/users',
            views    : {
                'content@app': {
                    templateUrl: 'app/main/users-management/users-management.html',
                    controller : 'UsersManagementController as vm'
                }
            }
            roles : {
                authorized: [USER_ROLES.admin]
            },
            authenticate: true
        });
  }

  })();

非常感谢！

编辑：

我认为两次获得“StateChangeStart”是正常的。我在 StateChangeStart 事件 (console.log(toState.name)) 中有一个控制台日志，我可以在第 2 步看到这一点：

• stateChangeStart // 事件
• app.users_management // 尝试访问此页面，但用户没有良好的角色
• stateChangeStart // state.transitionTo('app.auth_forbidden')
• app.auth_forbidden // 尝试访问此页面。用户可以访问它
• stateChangeSuccess // stateChangeSuccess 启动

我没问题，它就像我想要的那样工作，但在第 3 步（用户再次点击同一个链接，但他没有访问，并且他已经在被禁止的页面上）：

• stateChangeStart 事件
• app.users_management // 尝试访问但他不能。他应该被重定向到禁止页面，但他已经在这个页面上......

没有启动 StateChangeSuccess 事件...

Answer 1

我找到了一个解决方案，但我不知道这是否真的很好。无论如何：我发起一个活动并抓住这个活动：

在 run.js 中

$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams)
{
    var authorizedRoles = toState.roles.authorized;

    if (toState.authenticate)
    {
        var isAuthorized = authService.isAuthorized(authorizedRoles);
        var isAuthenticated = authService.isAuthenticated();

        if (!isAuthorized) {

            if (!isAuthenticated)
            {
                event.preventDefault(); 
                $rootScope.$broadcast('auth.not_authenticated');
                $state.go('app.auth_login');
                return;
            }
            else
            {
                event.preventDefault(); 
                $rootScope.$broadcast('auth.not_authorized');   // launch event
                $state.go('app.auth_forbidden');
                return;
            }
        }
    }

 }

并抓住事件：

$rootScope.$on('auth.not_authorized', function (event) {
            // some code here
        });

它有效，但我真的认为有更好的方法来做到这一点。