Question

我有一个AngularJS单页面应用程序，其中有很多HTML块，我会根据用户的权限级别向用户显示这些块。

用户权限由service个来电确定，并根据权限设置值。

$scope.permission = 'admin'

我可以使用ng-hide/show指令根据权限隐藏这些块。但我担心安全问题。通过更改css display属性，未经授权的人也可以查看这些块。

另一个选项是ng-if，我目前正在使用它。但我想知道我是否应该对routing做同样的事情，我相信这更安全。我可以使用ui.router角度模块来实现这一点。但是正确的方法是什么？

我应该使用ng-hide/show，ng-if还是routing？

期待一些好的想法。

非常感谢任何帮助。提前谢谢。

Answer 1

您应该为此目的创建一个指令：

app.directive('checkPermissions', ['PermissionsServices', function(PermissionsServices) {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs, ctrl) {

            if (attrs.permissions != '') {
                var hasPermission = PermissionsServices.hasAccess(attrs.checkPermissions);

                if (false == hasPermission) {
                    elem.remove();
                }
            } else {
                elem.remove();
            }
        }
    };
}]);

HTML部分

<a href="http://some_url" check-permissions="state1.name1" >Some URL</a>
<a ui-sref="state2.name2" check-permissions="state2.name2">State 2</a>
<button ng-click="state3.name" check-permissions="state3.name3">State 3</button>

PermissionsServices服务中的
PermissionsServices.hasAccess（）函数将检查用户是否可以访问应用程序的特定状态。您可能正在使用Angular Router或UI Router来处理状态。我正在使用UI路由器，所以我的功能代码如下。这个函数只会返回true或false。

PermissionsServices.hasAccess = function(stateName) {
        var hasAccess                   = false;


        //Some complex checking algorithm based on your requirement
        hasAccess = true

        return hasAccess;
};

希望有所帮助!!

Answer 2

要从路径透视图处理授权，我们可以为角度路由基础结构构建一些自定义扩展。路线可以定义为

$routeProvider.when('/admin', {
    templateUrl: 'admin.html',
    controller: 'AdminController',
    roles: ['admin']  //custom extension
});
$routeProvider.when('/home', {
    templateUrl: 'home.html',
    controller: 'HomeController',
    roles: ['admin', 'user'] //custom extension
})

此处角色数组定义谁有权访问路线。

为了强制执行，我们可以使用routeChangeStart事件来验证权限。这是我的书摘录，其中强调了如何强制执行角色

angular.module('app').run(function ($rootScope, $location,
SessionContext) {
    $rootScope.$on('$routeChangeStart', function (event, next) {
        if (next.roles && !SessionContext.authenticated) {
            $location.path('/login'); //needs to login
        }
        if (next.roles && SessionContext.authenticated && !SessionContext.isInRole(next.roles)) {
            $location.path('/unauthorized'); //un-authorized
        }
    });
});

SessionContext服务跟踪已登录的用户角色。

Answer 3

基本上ng-if将元素添加/删除到DOM，其中ad ng-show / ng-hide只是用css隐藏元素。

路由也是一种可行的选择，但这样您就可以为不同的用户提供多个部分。如果你只想隐藏一些用户的东西，我会选择ng-if

基于权限级别显示/隐藏零件的最佳方式 - Angular JS

3 个答案: