Question

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

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

用户再次点击“用户管理”，但同样为3.他无法在Chrome控制台中看到 BUT内容：“stateChangeStart”，“stateChangeStart” < / LI>

你对这个问题有所了解吗？

这是我的代码：

我的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：

 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 // event
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
        });

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

AngularJS：两次stateChangeStart而没有stateChangeSuccess

1 个答案: