angular.module('app', ['ngRoute']);
var app = angular.module('app1', ['app']);
app.config(['$provide', function($provide) {
//catch backend requests
$provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);
}]).run(['$httpBackend',function($httpBackend){
//setup fake backend
$httpBackend.whenPOST('/rbac').respond(function(method, url, data, headers){
console.log('Backend Requested: ' + data);
var response = {};
data = angular.fromJson(data);
angular.forEach(data, function(value, key) {
response[value] = false;
//ok, let's suppose that only 'User' auth item is allowed.
if(value == 'User')
response[value] = true;
});
return [200, response, {}];
});
//ignore any GET requests
$httpBackend.whenGET().passThrough();
}]);
/**
* Index page
*/
app.controller('indexController', ['$scope', 'rbac', function($scope, rbac){
rbac.checkAccess('User').then(function(allow) {
if(allow)
alert('User is allowed!');
});
rbac.checkAccess('Admin').then(function(allow) {
if(allow === false)
alert('You are not admin!');
});
}]);
<!DOCTYPE html>
<html ng-app="app1">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular-route.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular-mocks.js"></script>
<script src="app.js"></script>
<script src="rbac.js"></script>
</head>
<body ng-controller="indexController">
<p allow="Guest">Hello Guest</p>
<p allow="User">Hello User</p>
<p allow="Admin">Hello Admin</p>
</body>
</html>
/* Put your css in here */
angular.module('app').provider('rbac', function() {
//we don't wanna really cache it, we just wanna save states during application is still active
var cache = {};
this.$get = ['$http', function($http) {
return {
checkAccess: function(item) {
console.log('CheckAccess(' + item + ') = ' + cache[item]);
//already requested?
if(cache[item] !== undefined)
return cache[item];
//to prevent infinitive digest
cache[item] = false;
//ok, let's request backend
return $http.post('/rbac', [ item ]).then(function success(response) {
cache[item] = response.data[item];
return cache[item];
});
}
}
}];
});
angular.module('app').directive('allow', ['$animate', '$rootScope', 'rbac', function($animate, $rootScope, rbac) {
return {
transclude: 'element',
priority: 1000,
terminal: true,
restrict: 'A',
compile: function (element, attr, transclude) {
return function ($scope, $element, $attr) {
var childElement, childScope;
$rootScope.$watch(function(scope) { return rbac.checkAccess($attr.allow); }, function allowWatchAction(value) {
if (childElement) {
$animate.leave(childElement);
childElement = undefined;
}
if (childScope) {
childScope.$destroy();
childScope = undefined;
}
if(value) {
childScope = $scope.$new();
transclude(childScope, function (clone) {
childElement = clone;
$animate.enter(clone, $element.parent(), $element);
});
}
});
}
}
};
}]);