這些天我們忙于應(yīng)用的前端工作，我們主要使用angular完成的。最近的一個需求是基于角色訪問GUI。一個用戶可以有多個角色，而它應(yīng)只能訪問授權(quán)給他的那一部分GUI。

我們主要通過在2個層次限制應(yīng)用的GUI訪問，來解決上述需求:
 

1. 一個用戶只能訪問授權(quán)給他的頁面（或者說流量）

2. 在一個頁面上，用戶只能看到授權(quán)給他的那部分。

要解決上述需求1，我們捕捉路有變化事件并對每一路由變化進(jìn)行檢查，看用戶是否授權(quán)訪問下一路由，保證他不會看到拒絕訪問的頁面

$rootScope.$on("$routeChangeStart", function(event, next, current) {  
    if(!authService.isUrlAccessibleForUser(next.originalPath))  
    $location.path('/authError');  
}); 

上面的authService 是我們創(chuàng)建的一個服務(wù)，它有角色用戶列表，并給授權(quán)用戶路由流量。函數(shù)isUrlAccessibleForUser() 將檢查分配的用戶是否可以訪問給定流量并返回true或false.

服務(wù)將 從后臺和路由訪問信息中獲取一個用戶的角色列表，每個角色將保存在服務(wù)本身的一個Map集合中。（關(guān)于用戶和角色的一些細(xì)節(jié)可以存到數(shù)據(jù)局，通過后臺的方式獲取）

app.factory('authService', function ($http) {  
   
    var userRole = []; // obtained from backend  
    var userRoleRouteMap = {  
        'ROLE_ADMIN': [ '/dashboard', '/about-us', '/authError' ],  
        'ROLE_USER': [ '/usersettings', '/usersettings/personal', '/authError']  
    };  
   
    return {  
   
        userHasRole: function (role) {  
            for (var j = 0; j < userRole.length; j++) {  
                if (role == userRole[j]) {  
                    return true;  
                }  
            }  
            return false;  
        },  
   
        isUrlAccessibleForUser: function (route) {  
            for (var i = 0; i < userRole.length; i++) {  
                var role = userRole[i];  
                var validUrlsForRole = userRoleRouteMap[role];  
                if (validUrlsForRole) {  
                    for (var j = 0; j < validUrlsForRole.length; j++) {  
                        if (validUrlsForRole[j] == route)  
                            return true;  
                    }  
                }  
            }  
            return false;  
        }  
    };  
}); 

這將解決上述需求的第一點(diǎn)，對于需求的第二點(diǎn)我們來創(chuàng)建一條指令。這個指令信息類似以下：

<div my-access=”ROLE_ADMIN”>......</div> 

如果用戶有  ROLE_ADMIN 的這個角色的時候，將以上的html標(biāo)簽將被加載到html的頁面中，否則將 這個 Html標(biāo)簽從 頁面中移除。

指令的實(shí)現(xiàn)代碼如下:

.directive('myAccess', ['authService', 'removeElement', function (authService, removeElement) {  
    return{  
        restrict: 'A',  
        link: function (scope, element, attributes) {  
   
            var hasAccess = false;  
            var allowedAccess = attributes.myAccess.split(" ");  
            for (i = 0; i < allowedAccess.length; i++) {  
                if (authService.userHasRole(allowedAccess[i])) {  
                    hasAccess = true;  
                    break;  
                }  
            }  
   
            if (!hasAccess) {  
                angular.forEach(element.children(), function (child) {  
                    removeElement(child);  
                });  
                removeElement(element);  
            }  
   
        }  
    }  
}]).constant('removeElement', function(element){  
    element && element.remove && element.remove();  
}); 

這一辦法是很簡潔的，而我們在GUI上很巧妙的實(shí)現(xiàn)了用戶授權(quán). 一個潛在的問題是，如果UI的渲染器在你從后臺獲取用戶角色之前就已經(jīng)在運(yùn)行了，那么該HTML中所有帶上該指令的部分都會從html中被移除掉. 這對于我們而言不是個麻煩，因?yàn)槲覀儠诘卿浲瓿芍畷r就獲取到了用戶角色的詳細(xì)信息。而如果這一問題對你而言是個問題的話，解決方案可以是這樣：如果用戶角色還沒有獲取到，就只是隱藏這些html元素，僅等到你獲取到角色列表之后再按照授權(quán)0信息將它們移除掉. 同時還請注意不能因?yàn)橛辛艘粋€GUI的訪問控制，就省掉了后臺固有的安全實(shí)現(xiàn).

達(dá)者廣交，分享為先!

英文：AngularJS – Role based access on GUI

譯文：http://www.oschina.net/translate/angularjs-role-based-access-on-gui