根据权限级别显示/隐藏零件的最佳方法 - Angular JS答案

【问题标题】：Best way to show/hide a part based on permission level - Angular JS根据权限级别显示/隐藏零件的最佳方法 - Angular JS
【发布时间】：2015-07-27 06:46:46
【问题描述】：

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

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

$scope.permission = 'admin'

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

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

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

期待一些好的想法。

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

【问题讨论】：

stackoverflow.com/questions/21869283/…

标签： javascript angularjs angularjs-routing

【解决方案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 路由器或 UI 路由器来处理状态。我正在使用 UI 路由器，所以我在函数中的代码如下。这个函数只会返回真或假。

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


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

        return hasAccess;
};

希望有帮助！！

【讨论】：

很好的例子，超级完整。正是我需要的。我将在 ES6 中实现它。谢谢！

【解决方案2】：

为了从路由的角度处理授权，我们可以为 Angular 路由基础架构构建一些自定义扩展。路由可以定义为

$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 服务跟踪登录的用户角色。

【讨论】：

【解决方案3】：

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

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

【讨论】：

感谢您的回答。目前我正在使用 ng-if。

【解决方案4】：

正如 Coder John 所回答的，用户将始终能够破解此内容。即使您可以使用指令或 ngif 条件使其更难，但由于他们可以访问完整的源代码，因此始终可以在客户端进行修改。

正如上面写的建议，如果我们使用指令或 ngif 方法，元素本身会被删除。有没有办法删除为处理按钮的点击事件而编写的java脚本函数？因为我在按钮元素上放置指令或 ngif 条件。

最好的问候。

【讨论】：