has-authority 在按钮上不起作用答案

【问题标题】：has-authority not working on a buttonhas-authority 在按钮上不起作用
【发布时间】：2016-06-16 03:39:18
【问题描述】：

所以我使用 JHipster 来生成我的应用程序。

我可以看到使用has-authority 指令来显示/隐藏菜单的导航栏。

现在我要做的是在按钮上使用指令，仅向具有ROLE_ADMIN 的用户显示它

这是指令的代码

.directive('hasAuthority', ['Principal', function (Principal) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var setVisible = function () {
                    element.removeClass('hidden');
                },
                setHidden = function () {
                    element.addClass('hidden');
                },
                defineVisibility = function (reset) {

                    if (reset) {
                        setVisible();
                    }

                    Principal.hasAuthority(authority)
                        .then(function (result) {
                            if (result) {
                                setVisible();
                            } else {
                                setHidden();
                            }
                        });
                },
                authority = attrs.hasAuthority.replace(/\s+/g, '');

            if (authority.length > 0) {
                defineVisibility(true);

                scope.$watch(function(scope) {
                    return Principal.isAuthenticated();
                }, function(newValue) {
                    defineVisibility(true);
                });
            }
        }
    };
}]);

这就是它的工作原理

<li ng-class="{active: $state.includes('admin')}"  ng-switch-when="true" has-authority="ROLE_ADMIN" class="dropdown pointer">

这是我希望它工作的地方

<table class="jh-table table table-striped">
    <thead>
        ...
    </thead>
    <tbody>
        <tr
            ng-repeat="offeredService in travelRequest.offeredServices track by offeredService.id">
            <td><a
                ui-sref="offeredServiceType.detail({id:offeredService.offeredServiceType.id})">{{offeredService.offeredServiceType.name}}</a>
            </td>
            <td>{{offeredService.sellingPrice}}
                {{offeredService.currency.symbol}}</td>
            <td>{{offeredService.cost}}
                {{offeredService.currency.symbol}}</td>
            <td>{{offeredService.confirmationDate | date:'medium'}}</td>
            <td><a
                ui-sref="serviceProvider.detail({id:offeredService.serviceProvider.id})">{{offeredService.serviceProvider.name}}</a>
            </td>
            <td class="text-right">
                <div class="btn-group flex-btn-group-container">
                    <button type="submit"
                        ui-sref="offeredService.detail({id:offeredService.id})"
                        class="btn btn-info btn-sm">
                        <span class="glyphicon glyphicon-eye-open"></span> <span
                            class="hidden-xs hidden-sm" translate="entity.action.view"></span>
                    </button>
                    <button type="submit"
                        ui-sref="offeredService.edit({id:offeredService.id})"
                        class="btn btn-primary btn-sm">
                        <span class="glyphicon glyphicon-pencil"></span> <span
                            class="hidden-xs hidden-sm" translate="entity.action.edit"></span>
                    </button>
                    <button has-authority="ROLE_USER" type="submit"
                        ui-sref="offeredService.delete({id:offeredService.id})"
                        class="btn btn-danger btn-sm">
                        <span class="glyphicon glyphicon-remove-circle"></span> <span
                            class="hidden-xs hidden-sm" translate="entity.action.delete"></span>
                    </button>
                </div>
            </td>
        </tr>
    </tbody>
</table>

【问题讨论】：

has-authority 通过向其应用的元素添加或删除“隐藏”css 类来工作。您是否尝试过手动执行相同操作以查看它是否有效？以 Chrome 检查器为例
感谢您的回复。它可以工作，将hidden 类添加到元素会隐藏它。如何调试has-authority属性的问题？

标签： angularjs angularjs-directive jhipster

【解决方案1】：

在我看来你的条件不对：

<button has-authority="ROLE_USER" type="submit"
                        ui-sref="offeredService.delete({id:offeredService.id})"
                        class="btn btn-danger btn-sm">

管理员用户同时拥有 ROLE_USER 和 ROLE_ADMIN 权限。

因此，在您的情况下，按钮将始终显示。不应该像下面这样吗？

<button has-authority="ROLE_ADMIN" type="submit"

【讨论】：

An admin user has both authorities ROLE_USER and ROLE_ADMIN. 谢谢！！