使用 AngularJS 刷新 Bootstrap 导航栏

Question

我目前正在开发一个使用 AngularJS 和 Twitter Bootstrap 3.0 进行样式化的新项目。

该项目还使用 ASP.NET MVC WebAPI 提供具有基于角色的安全性的 RESTful API 以及使用 Owin 和 OAuth 生成承载和刷新令牌.

该项目的一个关键方面是它必须能够通过添加 and/or 删除菜单选项来刷新导航栏菜单，具体取决于分配给各个用户的 roles/permissions。如果用户当前登录到应用程序并且系统管理员决定为登录用户添加或删除角色，我希望 AngularJS 自动重新加载导航栏，这将根据角色神奇地显示或隐藏选项用户有。

目前我对 AngularJS 不是很了解，想知道这是否可能？我听说过一个叫做 $scope.apply() 的东西，它可以用于此，但作为一个没有经验的 AngularJS 用户，我不确定如何使用它。

这是显示菜单栏的视图的一部分，如您所见，我正在使用 show/hide 菜单选项的函数。一旦 WebAPI 调用生成了新的刷新令牌，如果它们的值发生变化，我希望再次重新评估这些函数。

<li data-ng-if="isAuthenticated()" class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Invoice <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a data-ng-if="isUserInInvoiceRole()" data-ui-sref="addInvoice">Add Invoice</a></li>
        <li data-ng-if="isUserInInvoiceRole()" class="divider"></li>
        <li><a data-ng-if="isUserInCreditNoteRole()" data-ui-sref="addCreditNote">Issue Credit Note</a></li>
        <li data-ng-if="isUserInCreditNoteRole()" class="divider"></li>
        <li><a data-ui-sref="showDaybook">Daybook</a></li>
        <li class="divider"></li>
        <li><a data-ui-sref="showCustomerLedger">Customer Ledger</a></li>
    </ul>
</li>

目前我强制刷新导航栏的唯一方法是通过 F5 进行页面刷新，这证明基于角色的系统有效，但我希望它通过重新加载导航栏自动工作。

控制器

'use strict';

appModule.controller('indexController', ['$scope', '$state', 'authService',
    function ($scope, $state, authService) {

        $scope.isAuthenticated = function () {
            return authService.isAuthenticated();
        };

        $scope.isUserInCreditNoteRole = function () {
            return authService.isAuthenticated() && authService.isUserInCreditNoteRole();
        };

        $scope.isUserInInvoiceRole = function () {
            return authService.isAuthenticated() && authService.isUserInInvoiceRole();
        };

        $scope.isUserInOrderRole = function () {
            return authService.isAuthenticated() && authService.isUserInOrderRole();
        };

        $scope.isUserInAdminRole = function () {
            return authService.isAuthenticated() && authService.isInAdminRole();
        };

    }]);

授权服务

这是带有相关代码的授权服务。请记住 [roles.xxx] 只是常量。

'use strict';

appModule.factory('authService', ['$http', 'roles',
    function ($http, roles) {

        var authServiceFactory = {};

        var authentication = {
            isAuth: false,
            roles: "Anon"
        };

        var checkRoles = function (access) {
            var result = false;
            for (var a in access) {
                console.log(access[a]);
                for (var b in access[a]) {
                    if (authentication.roles.indexOf(access[a][b]) >= 0) {
                        result = true;
                        break;
                    }
                }
                if (result)
                    break;
            }
            console.log('result ' + result);
            return result;
        };

        var isUserInInvoiceRole = function () {
            return checkRoles([roles.invoice]);
        };

        var isUserInOrderRole = function () {
            return checkRoles([roles.order]);
        };

        var isUserInCreditNoteRole = function () {
            return checkRoles([roles.creditNote]);
        };

        var isInAdminRole = function () {
            return checkRoles([roles.admin]);
        };

        var isAuthenticated = function () {
        return authentication.isAuth;
    }

    authServiceFactory.isAuthenticated = isAuthenticated;
    authServiceFactory.isUserInCreditNoteRole = isUserInCreditNoteRole;
    authServiceFactory.isUserInInvoiceRole = isUserInInvoiceRole;
    authServiceFactory.isUserInOrderRole = isUserInOrderRole;
    authServiceFactory.isInAdminRole = isInAdminRole;

    return authServiceFactory;

}]);

Answer 1

在了解 AngularJS 如何监视控制器作用域的更新后，我自己设法解决了这个问题。

在检索到新的刷新令牌并立即更新导航栏后，我只是在身份验证服务中重新填充了 authentication 对象。

使用 AngularJS 刷新 Bootstrap 导航栏

Refresh a Bootstrap navbar using AngularJS

angularjs

twitter-bootstrap-3