Question

我正在解析AngularJS应用程序中的权限...我想使用自定义指令来解析用户可以通过他的角色看到的内容。它只是客户端设计。如果用户在页面上输入了他无法访问的内容，则服务器返回403以获取来自此页面的所有数据请求。我的实际解决方案如下：

<li ng-repeat="menuItem in navigationItems" class='{{menuItem.css}}' restrict-access="menuItem.restrict"> <a href="#/{{menuItem.url}}"> <div class="label"> <span class="icon"> <span class="title">{{menuItem.title}}</span> </span> </div> </a> </li>

.directive('restrictAccess', function() {
    return {
        restrict: 'EA',
        prioriry: 100000,
        scope: {
            restrictAccess: "=restrictAccess"
        },
        controller: ['$scope', '$element', function($scope, $element) {

            var accessDenied = true;
            var userRole = App.LoggedUser.userRole;

            var attributes = $scope.restrictAccess.split(" ");
            for (var i in attributes) {
                if (userRole == attributes[i]) {
                    accessDenied = false;
                }
            }

            if (accessDenied) {
                $element.remove();
            }

        }]
    };
})

有很多问题......

由ng-include呈现的小部件控制器比我的指令更快，并且在从DOM中删除小部件之前，一些ajax请求被发送到服务器。 我需要指示在子元素中停止控制器的内容。

我希望这是可以理解的...这是测试Fiddle

谢谢大卫

Answer 1

我在上一个项目中使用了angularjs身份验证拦截器。它适合你所需要的......

Inteceptor将请求存储在每个服务请求和广播消息上。您可以在控制器上获取广播消息。这是我处理的代码.. 结帐auth interceptor。

/**
 * @license HTTP Auth Interceptor Module for AngularJS
 * (c) 2012 Witold Szczerba
 * License: MIT
 */
angular.module('http-auth-interceptor', [])

    .provider('authService', function() {
        /**
         * Holds all the requests which failed due to 401 response,
         * so they can be re-requested in future, once login is completed.
         */
        var buffer = [];

        /**
         * Required by HTTP interceptor.
         * Function is attached to provider to be invisible for regular users of this service.
         */
        this.pushToBuffer = function(config, deferred) {
            buffer.push({
                config: config,
                deferred: deferred
            });
        }

        this.$get = ['$rootScope','$injector', function($rootScope, $injector) {
            var $http; //initialized later because of circular dependency problem
            function retry(config, deferred) {
                $http = $http || $injector.get('$http');
                $http(config).then(function(response) {
                    deferred.resolve(response);
                });
            }
            function retryAll() {
                for (var i = 0; i < buffer.length; ++i) {
                    retry(buffer[i].config, buffer[i].deferred);
                }
                buffer = [];
            }

            return {
                loginConfirmed: function() {
                    $rootScope.$broadcast('event:auth-loginConfirmed');
                    $rootScope.$apply();
                    //retryAll();
                }
            }
        }]
    })

/**
 * $http interceptor.
 * On 401 response - it stores the request and broadcasts 'event:angular-auth-loginRequired'.
 */
    .config(function($httpProvider, authServiceProvider) {

        var interceptor = ['$rootScope', '$q',function($rootScope, $q,$cookies) {
            function success(response) {
                return response;
            }

            function error(response) {
                if (response.status === 401) {                  
                    var deferred = $q.defer();
                    authServiceProvider.pushToBuffer(response.config, deferred);
                    $rootScope.$broadcast('event:auth-loginRequired');
                    return deferred.promise;
                }
                else if (response.status === 404 || response.status === 400) {

                    $rootScope.$broadcast('event:not-found');
                }
                // otherwise
                return $q.reject(response);
            }

            return function(promise) {
                return promise.then(success, error);
            }

        }];
        $httpProvider.responseInterceptors.push(interceptor);
    });

在你的控制器中：

$rootScope.$on('event:auth-loginRequired', function() {
     //do what you want, for example throw a message        
});

在AngularJS指令中高级操作DOM

1 个答案: