AngularJS：两次stateChangeStart，没有StateChangeSucture

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

登录到后台

重定向到/仪表板（在chrome控制台中：“stateChangeStart”、“stateChangeSuccess”）

用户单击“用户管理”链接，但不允许他查看内容，因此他被重定向到/禁止（在chrome控制台中：“stateChangeStart”、“stateChangeSuccess”）

用户再次单击“用户管理”，但与3相同。他看不到内容，但在chrome控制台中：“stateChangeStart”，“stateChangeStart”

你知道这个问题吗

这是我的代码：

my 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;
                }

            }
        });

 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;
        }

未授权的函数：

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;
                }

            }
        });

 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\u management//尝试访问此页面，但用户没有良好的角色
• stateChangeStart//state.transitiono（'app.auth\u禁止'）
• app.auth\u禁止//尝试访问此页面。用户可以访问它
• stateChangeSuccess//stateChangeSuccess已启动

我同意这一点，它可以像我想要的那样工作，但在第3步（用户再次单击同一链接，但他无法访问，并且他已经在被禁止的页面上）：

• stateChangeStart事件
• app.users\u management//尝试访问，但他无法访问。他应该被重定向到禁止页面，但他已经在这个页面上了

---

没有启动StateChangeSuccess事件…

我找到了一个解决方案，但我不知道这是否真的是一个好方法。无论如何：我启动一个事件并捕获此事件：

在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
        });

---

这是可行的，但我真的认为有更好的方法。我找到了一个解决方案，但我不知道这是否真的是一个好方法。无论如何：我启动一个事件并捕获此事件：

在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
        });

---

这是可行的，但我真的认为有更好的方法可以做到这一点。

你没有遵循角度最佳实践。如果你有一个例子可以更好地做到这一点，我就这么认为，因为我是Angularjs的初学者：）最佳例子你搜索john papa的文档你没有遵循角度最佳实践。如果你有一个例子可以更好地做到这一点，我之所以这样认为是因为我是Angularjs的初学者：）这是你们在约翰·帕帕的文档中搜索的最好的例子