av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

AngularJS – 實(shí)現(xiàn)基于角色訪問(wèn)控制的 GUI

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

10多年的寧遠(yuǎn)網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷(xiāo)型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整寧遠(yuǎn)建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“寧遠(yuǎn)網(wǎng)站設(shè)計(jì)”,“寧遠(yuǎn)網(wǎng)站推廣”以來(lái)，每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

我們主要通過(guò)在2個(gè)層次限制應(yīng)用的GUI訪問(wèn)，來(lái)解決上述需求:

  1. 一個(gè)用戶(hù)只能訪問(wèn)授權(quán)給他的頁(yè)面（或者說(shuō)流量）

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

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

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

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

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

 
 
      
  
  1. app.factory('authService', function ($http) {  
    2.   
  
  2.    
    3.   
  
  3.     var userRole = []; // obtained from backend  
    4.   
  
  4.     var userRoleRouteMap = {  
    5.   
  
  5.         'ROLE_ADMIN': [ '/dashboard', '/about-us', '/authError' ],  
    6.   
  
  6.         'ROLE_USER': [ '/usersettings', '/usersettings/personal', '/authError']  
    7.   
  
  7.     };  
    8.   
  
  8.    
    9.   
  
  9.     return {  
    10.   
  
  10.    
    11.   
  
  11.         userHasRole: function (role) {  
    12.   
  
  12.             for (var j = 0; j < userRole.length; j++) {  
    13.   
  
  13.                 if (role == userRole[j]) {  
    14.   
  
  14.                     return true;  
    15.   
  
  15.                 }  
    16.   
  
  16.             }  
    17.   
  
  17.             return false;  
    18.   
  
  18.         },  
    19.   
  
  19.    
    20.   
  
  20.         isUrlAccessibleForUser: function (route) {  
    21.   
  
  21.             for (var i = 0; i < userRole.length; i++) {  
    22.   
  
  22.                 var role = userRole[i];  
    23.   
  
  23.                 var validUrlsForRole = userRoleRouteMap[role];  
    24.   
  
  24.                 if (validUrlsForRole) {  
    25.   
  
  25.                     for (var j = 0; j < validUrlsForRole.length; j++) {  
    26.   
  
  26.                         if (validUrlsForRole[j] == route)  
    27.   
  
  27.                             return true;  
    28.   
  
  28.                     }  
    29.   
  
  29.                 }  
    30.   
  
  30.             }  
    31.   
  
  31.             return false;  
    32.   
  
  32.         }  
    33.   
  
  33.     };  
    34.   
  
  34. }); 
    35.

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

 
 
      
  
  1. ......
 

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

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

 
 
      
  
  1. .directive('myAccess', ['authService', 'removeElement', function (authService, removeElement) {  
    2.   
  
  2.     return{  
    3.   
  
  3.         restrict: 'A',  
    4.   
  
  4.         link: function (scope, element, attributes) {  
    5.   
  
  5.    
    6.   
  
  6.             var hasAccess = false;  
    7.   
  
  7.             var allowedAccess = attributes.myAccess.split(" ");  
    8.   
  
  8.             for (i = 0; i < allowedAccess.length; i++) {  
    9.   
  
  9.                 if (authService.userHasRole(allowedAccess[i])) {  
    10.   
  
  10.                     hasAccess = true;  
    11.   
  
  11.                     break;  
    12.   
  
  12.                 }  
    13.   
  
  13.             }  
    14.   
  
  14.    
    15.   
  
  15.             if (!hasAccess) {  
    16.   
  
  16.                 angular.forEach(element.children(), function (child) {  
    17.   
  
  17.                     removeElement(child);  
    18.   
  
  18.                 });  
    19.   
  
  19.                 removeElement(element);  
    20.   
  
  20.             }  
    21.   
  
  21.    
    22.   
  
  22.         }  
    23.   
  
  23.     }  
    24.   
  
  24. }]).constant('removeElement', function(element){  
    25.   
  
  25.     element && element.remove && element.remove();  
    26.   
  
  26. }); 
    27.

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

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

英文：AngularJS – Role based access on GUI

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


網(wǎng)站欄目：AngularJS – 實(shí)現(xiàn)基于角色訪問(wèn)控制的 GUI
文章起源：http://uogjgqi.cn/article/cdeppdj.html
掃二維碼與項(xiàng)目經(jīng)理溝通

我們?cè)谖⑿派?4小時(shí)期待你的聲音

解答本文疑問(wèn)/技術(shù)咨詢(xún)/運(yùn)營(yíng)咨詢(xún)/技術(shù)建議/互聯(lián)網(wǎng)交流