要解决上述需求1，我们捕捉路有变化事件并对每一路由变化进行检查，看用户是否授权访问下一路由，保证他不会看到拒绝访问的页面
$rootScope.$on("$routeChangeStart",function(event,next,current){
if(!authService.isUrlAccessibleForUser(next.originalPath))
$location.path('/authError');
});
上面的authService是我们创建的一个服务，它有角色用户列表，并给授权用户路由流量。函数isUrlAccessibleForUser()将检查分配的用户是否可以访问给定流量并返回true或false.
服务将 从后台和路由访问信息中获取一个用户的角色列表，每个角色将保存在服务本身的一个Map集合中。（关于用户和角色的一些细节可以存到数据局，通过后台的方式获取）
app.factory('authService',171)">function($http){
varuserRole=[];//obtainedfrombackend
varuserRoleRouteMap={
'ROLE_ADMIN':['/dashboard','/about-us',147)">'/authError'],147)">'ROLE_USER':['/usersettings',147)">'/usersettings/personal',147)">'/authError']
};
return{
userHasRole:function(role){
for(varj=0;j<userRole.length;j++){
if(role==userRole[j]){
returntrue;
}
}
false;
},isUrlAccessibleForUser:function(route){
vari=0;i<userRole.length;i++){
varrole=userRole[i];
varvalidUrlsForRole=userRoleRouteMap[role];
if(validUrlsForRole){
0;j<validUrlsForRole.length;j++){
if(validUrlsForRole[j]==route)
true;
}
}
}
false;
}
};
});
这将解决上述需求的第一点，对于需求的第二点我们来创建一条指令。这个指令信息类似以下：
<divmy-access=”ROLE_ADMIN”>......</div>
如果用户有ROLE_ADMIN的这个角色的时候，将以上的html标签将被加载到html的页面中，否则将 这个 Html标签从 页面中移除。
指令的实现代码如下:
.directive('myAccess',['removeElement',171)">function(authService,removeElement){
return{
restrict:'A',link:function(scope,element,attributes){
varhasAccess=false;
varallowedAccess=attributes.myAccess.split("");
for(i=0;i<allowedAccess.length;i++){
if(authService.userHasRole(allowedAccess[i])){
hasAccess=true;
break;
}
}
if(!hasAccess){
angular.forEach(element.children(),171)">function(child){
removeElement(child);
});
removeElement(element);
}
}
}
}]).constant(function(element){
element&&element.remove&&element.remove();
});
这一办法是很简洁的，而我们在GUI上很巧妙的实现了用户授权. 一个潜在的问题是，如果UI的渲染器在你从后台获取用户角色之前就已经在运行了，那么该HTML中所有带上该指令的部分都会从html中被移除掉. 这对于我们而言不是个麻烦，因为我们会在登录完成之时就获取到了用户角色的详细信息。而如果这一问题对你而言是个问题的话，解决方案可以是这样：如果用户角色还没有获取到，就只是隐藏这些html元素，仅等到你获取到角色列表之后再按照授权0信息将它们移除掉. 同时还请注意不能因为有了一个GUI的访问控制，就省掉了后台固有的安全实现.