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

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

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

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

控制頁面路由的跳轉，沒有許可權的使用者不能跳轉到指定url
頁面元素的顯示控制，沒有對應許可權的使用者不能看到該元素
但在此之前，我們還有一項重要的事要做。

儲存使用者資訊

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

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按鈕將不可用。