检查用户是否有权访问特定状态

Question

我使用 angular-permission，我想检查用户是否可以访问特定状态。

我的状态配置：

    $stateProvider
        .state('app', {
            url: '/',
            abstract: true,
            data: {
                permissions: {
                    only: ['BASE']
                }
            }
        })

有没有我可以在控制器中使用的方法或东西来确定它？

// somewhere in controller
if (Permission.hasAccessToState('app')) {
    // I want to check if user has access to state without navigating to it
};

如果有人感兴趣，这里有相应的discussion on github。

Answer 1

我没有在文档 wiki 中找到任何内容。但是根据消息来源和评论，似乎有一个 Authorization 服务可用，您可以利用它。

//inject PermissionMap and Authorization    
App.controller('Controller',function(PermissionMap,Authorization,$scope) {

     //get the state by name an assign it to `state`
      var permissionMap = new PermissionMap(state.data.permissions);

      var authorizationResult = Authorization.authorize(permissionMap);

      authorizationResult
        .then(function () {
          //authorized
        })
        .catch(function (rejectedPermission) {
          //unauthorized
        });
});

检查这段代码，看看它是否有效

更新

在你回复之后，我更深入地研究了代码。也许我们需要 StatePermissionMap 和 StateAuthorization。

 var statePermissionMap = new StatePermissionMap(state);

  StateAuthorization
      .authorize(statePermissionMap)
      .then(function () {
         //authorized
      })
      .catch(function (rejectedPermission) {
        //unauthorized
      })

Answer 2

文档中没有提及任何内容，但这是我实现它的方法。

基本上，我在我的 $rootScope 中有用户角色（因为我从后端获取它们）

1) 在所有状态定义中定义所有用户有权访问该状态的内容。示例：

      .state('state1', {
            url: '/state1',
            views: {
                content: {
                    templateUrl: 'state1-partial.html',
                    controller: 'StateOneController'
                }
            },
            data: {
                    access:['Admin','Manager'] //only admin and manager can access this state
            }
        })
       .state('state2', {
            url: '/state2',
            views: {
                content: {
                    templateUrl: 'state2-partial.html',
                    controller: 'StateTwoController'
                }
            },
            data: {
                    access:['Admin'] //only admin can access this state
            }
        })

2) 然后在 angular.module 运行函数中，当状态更改事件发生时我访问这些：

此外，我在这里使用服务 isAuthorized 来验证用户是否有权访问该状态。如果是，我将用户导航到该状态，否则我会抛出错误。

angular.module('myApp').run(function($rootScope, $state,$stateParams,isAuthorized){
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams,   fromState,fromParams) {

    var isAccessRequired = toState.data.access;
    var isAccessRequired = toState.data && toState.data.access;
        //prevent default routing


            if(isAccessRequired){
                //I stored userRoles in $rootScope.userRole in an array when fetching from backend.
                var hasAccess = isAuthorized($rootScope.userRole,toState.data.access);

                if(!hasAccess){
                    event.preventDefault();

                    //user doesnt have access, show error and dont take him anywhere


                }

            }


    });
});

3) 在我的服务中 (isAuthorized):

(function(){
    'use strict';

    angular.module('myApp')

        .service('isAuthorized', function() {
           return function(role,access){

          //logic here that will see if data.access is present in the user roles, if yes it will return true else return false

                return flag;
           }


        });

})();

检查用户是否有权访问特定状态

Check if user has permission to access specific states

angularjs

angular-ui-router

angular-permission