假设我们在我的 Angular SPA 应用程序中有一个菜单，现在我希望向所有用户显示基本选项，例如家庭、关于我们、运营商机会等。
我还希望有几个其他选项，例如管理用户、管理帖子等，这些选项只会显示给管理员。
我们还假设我们有一个 API 访问点为我提供用户角色，或者更好的是，用户角色位于从 /api/users/me 检索的对象中。
封装这些管理工具以免被普通用户查看的最佳方式是什么？
视图之间是否存在某种继承？就像在 Django 中一样？，有没有办法向未经授权的用户隐藏 DOM 元素？（是的，我知道它是客户端）。
我真的不想为菜单使用不同的视图，因为它应该是一个通用组件。
我想如果我之前所有问题的答案都是否定的，那么剩下的问题是：最好的实现是什么？自定义指令（“E”+“A”）说：
<limitedAccss admin>Edit page</limitedAccess>
<limitedAccss user>view page</limitedAccess>
或者也许只是使用带有用户对象条件的常规 ng-show？
解决方案在这个小提琴中：
var app = angular.module('myApp', []);
app.service('authService', function(){
var user = {};
user.role = 'guest';
return{
getUser: function(){
return user;
},
generateRoleData: function(){
/* this is resolved before the
router loads the view and model.
It needs to return a promise. */
/* ... */
}
}
});
app.directive('restrict', function(authService){
return{
restrict: 'A',
priority: 100000,
scope: false,
compile: function(element, attr, linker){
var accessDenied = true;
var user = authService.getUser();
var attributes = attr.access.split(" ");
for(var i in attributes){
if(user.role == attributes[i]){
accessDenied = false;
}
}
if(accessDenied){
element.children().remove();
element.remove();
}
return function linkFn() {
/* Optional */
}
}
}
});
如果你想在 IE 7 或 8 中使用这个指令，你需要手动删除元素的子元素，否则会抛出错误：
angular.forEach(element.children(), function(elm){
try{
elm.remove();
}
catch(ignore){}
});
可能的用法示例：
<div data-restrict access='superuser admin moderator'><a href='#'>Administrative options</a></div>
使用 Karma + Jasmine 进行单元测试：
注意：done回调函数仅适用于 Jasmine 2.0，如果您使用的是 1.3，则应使用waitsFor代替。
describe('restrict-remove', function(){
var scope, compile, html, elem, authService, timeout;
html = '<span data-restrict data-access="admin recruiter scouter"></span>';
beforeEach(function(){
module('myApp.directives');
module('myApp.services');
inject(function($compile, $rootScope, $injector){
authService = $injector.get('authService');
authService.setRole('guest');
scope = $rootScope.$new();
// compile = $compile;
timeout = $injector.get('$timeout');
elem = $compile(html)(scope);
elem.scope().$apply();
});
});
it('should allow basic role-based content discretion', function(done){
timeout(function(){
expect(elem).toBeUndefined();
done(); //might need a longer timeout;
}, 0);
});
});
describe('restrict-keep', function(){
var scope, compile, html, elem, authService, timeout;
html = '<span data-restrict data-access="admin recruiter">';
beforeEach(function(){
module('myApp.directives');
module('myApp.services');
inject(function($compile, $rootScope, $injector){
authService = $injector.get('authService');
timeout = $injector.get('$timeout');
authService.setRole('admin');
scope = $rootScope.$new();
elem = $compile(html)(scope);
elem.scope().$apply();
});
});
it('should allow users with sufficient priviledsges to view role-restricted content', function(done){
timeout(function(){
expect(elem).toBeDefined();
expect(elem.length).toEqual(1);
done(); //might need a longer timeout;
}, 0)
})
});
元素的通用访问控制指令，不使用 ng-if（仅从 V1.2 开始 - 目前不稳定）或 ng-show，它实际上不会从 DOM 中删除元素。
ng-if绝对是我会这样做的方式！只需将审核工具放在它们所属的整个视图中，如果用户应该拥有它们，它们就会出现。ng-show/ng-hide也可以，如果您使用的是 1.1.5 之前的 angular 版本。
确保您的后端/服务器/api 不会仅仅因为您的 js 要求主持人操作而响应请求，这一点非常重要！始终让服务器在每次调用时验证他们的授权。
ng-if 或 ng-hide 都可以，
html只是一个视图，不应该负责处理安全，你的安全
拥有与用户关联的权限对象可能很有用。当我检索用户数据时，我获得了一个权限 json，然后在 angular
<div ng-if="user.permissions.restrictedArea">Very restricted area</div>
用户 Json 看起来像这样：
{name:"some one", permissions:{restrictedArea:false,sandbox:true}} //and so on...