AngularJs基於角色的前端存取控制的實現_AngularJS

最近做的項目是使用Angular做一個單頁應用，但因為使用者有不同的角色（管理員、編輯、普通財務人員等），所以需要進行不同角色的存取控制。

因為後端存取控制的經驗比較豐富，所以這裡只記錄了前端存取控制的實現。請注意，前端最多隻能做到顯示控制！並不能保證安全，所以後端是一定要做存取控制的！

角色型存取控制需要做到兩個層面的存取控制：

1. 控制頁面路由的跳轉，沒有許可權的使用者不能跳轉到指定url
2. 頁面元素的顯示控制，沒有對應許可權的使用者不能看到該元素
   

但在此之前，我們還有一項重要的事要做。

儲存使用者資訊

首先我們要做的，並不是和存取控制有關的事，首先我們要儲存好使用者資訊。包括使用者的基本資料，如使用者名稱、真實姓名；以及使用者角色。下面是資料結構：

user = {
  username:"",
  realname:"",
  role:""
}

儲存的時候就將整個user儲存，但存在哪裡呢？考慮到必須在任何頁面都可以訪問到，第一反應是儲存到rootScope中，但我們應該盡量避免使用rootScope；除此之外，我們可以儲存在頂級的controller或者是全域的constant中，這兩種解決方案都可以，但它們的問題就是一旦頁面重新整理，就不管用了（$rootScope也一樣）。考慮到user這個變數的生命週期應該要與session相同，所以，我使用了SessionStorage。

在建立controller時，需要加入$sessionStorage：

app.controller('controller',['$sessionStorage', function($sessionStorage){}]); 

在登入成功後，將user儲存到SessionStorage中：

$sessionStorage.USER = user;

好了，之後通過$sessionStorage就可以擷取到使用者資訊了。

user = $sessionStorage.USER;

控制頁面路由的跳轉

下面我們開始實現第一點：控制頁面路由的跳轉。

要做到第一點比較容易，Angular路由改變時會觸發$stateChangeStart事件（我用的是stateProvider，所以監聽stateChangeStart，如果是用的route或是location，應該監聽它們對應的事件），監聽此事件，在裡面根據訪問的url以及使用者角色進行許可權判斷，比如登入的判斷就可以在裡面做，訪問那個url需要登入就直接跳轉到登入介面。

首先先寫一個auth服務，用於許可權認證：

/** * 角色型存取控制 */App.service("auth", ["$http","$sessionStorage", function($http, $sessionStorage){  var roles = []; // 從後端資料庫擷取的角色表  // 從後端擷取的角色許可權Url映射表，結構為{"role":["/page1", "/page2"……]}  var urlPermissions = {};  // 去後端擷取  (function(){   // 此處為測試方便，直接賦值了，下面也僅以樣本為目的，盡量簡單了   roles = ["admin", "user"]   urlPermissions = {    // 管理員可以訪問所用頁面    "admin":["*"],     // 普通使用者可以訪問page路徑下的所有介面（登入、註冊等頁面）以及系統首頁    "user":["page.*", "app.index", "app.detail"]    }  })();  function convertState(state) {   return state.replace(".", "\\\.").replace("*", ".*");  }  return {   // 是否有訪問某url的許可權   isAccessUrl:function(url) {    var user = $sessionStorage.USER;    for(var role in roles) {     if(user.role.toLowerCase() == roles[role].toLowerCase()) {      console.log(urlPermissions[roles[role]])      for(i in urlPermissions[roles[role]]) {       var regx = eval("/"+convertState(urlPermissions[roles[role]][i])+"/");       console.log(regx+ " "+ url)       if(regx.test(url)) {        return true;       }      }     }    }    return false;   }  }}])

roles是角色，從後台擷取；urlPermissions是每個角色對應的能被其訪問的url列表，也從後台擷取，可通過後台配置。這樣，每次新增角色，我們就可以動態為其配置存取權限。

最重要的是isAccessUrl方法，傳入url後，isAccessUrl首先會通過$sessionStorage擷取使用者資訊，取得使用者角色，然後看使用者角色是否在角色表中；若在角色表中，就看此角色是否有訪問url的許可權。我們在後台配置的時候，是直接指定狀態，但如果沒有萬用字元的話，那麼每一個頁面都得寫一個url，所以，就增加了萬用字元 功能，然後將url列表中的每個url轉化為Regex，再來驗證，這樣配置就靈活了很多。

最後是在run中監聽事件$stateChangeStart ：

App.run(["$rootScope",'$state', "auth", "$sessionStorage", function($rootScope, $state, auth, $sessionStorage){ $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {  // 路由存取控制  if(toState.name!="page.login" && !auth.isAccessUrl(toState.name)) {    // 查看是否需要登入：   var user = $sessionStorage.USER;   if(user == null) {    event.preventDefault();    $state.go("page.login");    return;   }   event.preventDefault();   $state.go("page.error");   }});}])

好了，現在就實現了url的存取控制。

頁面元素的顯示控制

至於第二點，我的解決方案是自訂指令，下面是樣本：

<div zg-access="TEST_ACCESS"></div>

注意，這裡傳入的不是角色，而是許可權。因為使用者角色是可以動態擴充的，如果這裡寫的是什麼樣的角色才可以訪問這個元素，那以後每新增一個角色都將是一個很大很大的麻煩，因為你得一個個來修改代碼。下面是自訂指令zg-access的代碼：

/** * 元素層級的存取控制指令 */App.directive("zgAccess", function($sessionStorage, $http){ var roles = []; // 角色 var elemPermissions = {}; // 角色元素許可權映射表，如{ "role":{"SEARCH"}}，role有這個搜尋許可權 // 後台擷取 (function(){  // 簡便起見，這裡直接產生  roles = ["admin", "user", "visitor"];  elemPermission = {   "admin":["*"],   "user":["SEARCH"],   "visitor":[]  } })(); console.log("zg-access"); return {  restrict: 'A',  compile: function(element, attr) {    // 初始為不可見狀態none，還有 禁用disbaled和可用ok，共三種狀態    var level = "none";    console.log(attr)    if(attr && attr["zgAccessLevel"]) {     level = attr["zgAccessLevel"];    }    switch(level) {     case "none": element.hide(); break;     case "disabled":       element.attr("disabled", "");      break;    }    // 擷取元素許可權    var access = attr["zgAccess"];    // 將此許可權上傳到後端的資料庫    (function(){     //upload     })();    return function(scope, element) {     // 判斷使用者有無許可權     var user = $sessionStorage.USER;     if(user==null||angular.equals({}, user)) {      user = {};      user.role = "visitor";     }     var role = user.role.toLowerCase();     console.log(roles);     for(var i in roles) {      var tmp = roles[i].toLowerCase();      if(role == tmp) {       tmp = elemPermission[role];       console.log(tmp)       for(var j in tmp){        console.log(tmp[j]+" "+access);        if(access.toLowerCase() == tmp[j].toLowerCase()) {         element.removeAttr("disabled");         element.show();        }        }      }     }    };   } }})

zgAccessLevel是一個屬性，用來控制層級，如果是none（預設為none），就不顯示元素；如果是disbaled，就是元素不可用（如Button不可用）。

下面是元素樣本：

<button ng-click="" zg-access="SEARCH" zg-access-level="disabled">Search</button>

此時，若以admin角色或者user角色登入，Search按鈕將不可用。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。