最近做的項(xiàng)目是使用Angular做一個單頁應(yīng)用，但因?yàn)橛脩粲胁煌慕巧ü芾韱T、編輯、普通財務(wù)人員等），所以需要進(jìn)行不同角色的訪問控制。
因?yàn)楹蠖嗽L問控制的經(jīng)驗(yàn)比較豐富，所以這里只記錄了前端訪問控制的實(shí)現(xiàn)。請注意，前端最多只能做到顯示控制！并不能保證安全，所以后端是一定要做訪問控制的！
基于角色的訪問控制需要做到兩個層面的訪問控制：
但在此之前，我們還有一項(xiàng)重要的事要做。
存儲用戶信息
首先我們要做的，并不是和訪問控制有關(guān)的事，首先我們要保存好用戶信息。包括用戶的基本信息，如用戶名、真實(shí)姓名；以及用戶角色。下面是數(shù)據(jù)結(jié)構(gòu)：
user = {
username:"",
realname:"",
role:""
}
存儲的時候就將整個user存儲，但存在哪里呢？考慮到必須在任何頁面都可以訪問到，第一反應(yīng)是存儲到rootScope中，但我們應(yīng)該盡量避免使用rootScope；除此之外，我們可以存儲在頂級的controller或者是全局的constant中，這兩種解決方案都可以，但它們的問題就是一旦頁面刷新，就不管用了（$rootScope也一樣）。考慮到user這個變量的生命周期應(yīng)該要與session相同，所以，我使用了SessionStorage。
在創(chuàng)建controller時，需要加入$sessionStorage：
app.controller('controller',['$sessionStorage', function($sessionStorage){}]); 在登錄成功后，將user存儲到SessionStorage中：
$sessionStorage.USER = user;
好了，之后通過$sessionStorage就可以獲取到用戶信息了。
user = $sessionStorage.USER;
控制頁面路由的跳轉(zhuǎn)
下面我們開始實(shí)現(xiàn)第一點(diǎn)：控制頁面路由的跳轉(zhuǎn)。
要做到第一點(diǎn)比較容易，Angular路由改變時會觸發(fā)$stateChangeStart事件（我用的是stateProvider，所以監(jiān)聽stateChangeStart，如果是用的route或是location，應(yīng)該監(jiān)聽它們對應(yīng)的事件），監(jiān)聽此事件，在里面根據(jù)訪問的url以及用戶角色進(jìn)行權(quán)限判斷，比如登錄的判斷就可以在里面做，訪問那個url需要登錄就直接跳轉(zhuǎn)到登錄界面。
首先先寫一個auth服務(wù)，用于權(quán)限認(rèn)證：
/** * 基于角色的訪問控制 */App.service("auth", ["$http","$sessionStorage", function($http, $sessionStorage){ var roles = []; // 從后端數(shù)據(jù)庫獲取的角色表 // 從后端獲取的角色權(quán)限Url映射表，結(jié)構(gòu)為{"role":["/page1", "/page2"……]} var urlPermissions = {}; // 去后端獲取 (function(){ // 此處為測試方便，直接賦值了，下面也僅以示例為目的，盡量簡單了 roles = ["admin", "user"] urlPermissions = { // 管理員可以訪問所用頁面 "admin":["*"], // 普通用戶可以訪問page路徑下的所有界面（登錄、注冊等頁面）以及系統(tǒng)主頁 "user":["page.*", "app.index", "app.detail"] } })(); function convertState(state) { return state.replace(".", "http:///.").replace("*", ".*"); } return { // 是否有訪問某url的權(quán)限 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是每個角色對應(yīng)的能被其訪問的url列表，也從后臺獲取，可通過后臺配置。這樣，每次新增角色，我們就可以動態(tài)為其配置訪問權(quán)限。
最重要的是isAccessUrl方法，傳入url后，isAccessUrl首先會通過$sessionStorage獲取用戶信息，取得用戶角色，然后看用戶角色是否在角色表中；若在角色表中，就看此角色是否有訪問url的權(quán)限。我們在后臺配置的時候，是直接指定狀態(tài)，但如果沒有通配符的話，那么每一個頁面都得寫一個url，所以，就增加了通配符 功能，然后將url列表中的每個url轉(zhuǎn)化為正則表達(dá)式，再來驗(yàn)證，這樣配置就靈活了很多。
最后是在run中監(jiān)聽事件$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"); }});}])好了，現(xiàn)在就實(shí)現(xiàn)了url的訪問控制。
頁面元素的顯示控制
至于第二點(diǎn)，我的解決方案是自定義指令，下面是示例：
<div zg-access="TEST_ACCESS"></div>
注意，這里傳入的不是角色，而是權(quán)限。因?yàn)橛脩艚巧强梢詣討B(tài)擴(kuò)展的，如果這里寫的是什么樣的角色才可以訪問這個元素，那以后每新增一個角色都將是一個很大很大的麻煩，因?yàn)槟愕靡粋€個來修改代碼。下面是自定義指令zg-access的代碼：
/** * 元素級別的訪問控制指令 */App.directive("zgAccess", function($sessionStorage, $http){ var roles = []; // 角色 var elemPermissions = {}; // 角色元素權(quán)限映射表，如{ "role":{"SEARCH"}}，role有這個搜索權(quán)限 // 后臺獲取 (function(){ // 簡便起見，這里直接生成 roles = ["admin", "user", "visitor"]; elemPermission = { "admin":["*"], "user":["SEARCH"], "visitor":[] } })(); console.log("zg-access"); return { restrict: 'A', compile: function(element, attr) { // 初始為不可見狀態(tài)none，還有 禁用disbaled和可用ok，共三種狀態(tài) 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; } // 獲取元素權(quán)限 var access = attr["zgAccess"]; // 將此權(quán)限上傳到后端的數(shù)據(jù)庫 (function(){ //upload })(); return function(scope, element) { // 判斷用戶有無權(quán)限 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（默認(rèn)為none），就不顯示元素；如果是disbaled，就是元素不可用（如Button不可用）。
下面是元素示例：
<button ng-click="" zg-access="SEARCH" zg-access-level="disabled">Search</button>
此時，若以admin角色或者user角色登錄，Search按鈕將不可用。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
