Github 項目地址 https://github.com/zgljl2012/angular-permission
最近做的項目是使用Angular做一個單頁應用，但因為用戶有不同的角色（管理員秒拔、編輯挑围、普通財務人員等）手幢，所以需要進行不同角色的訪問控制哩掺。
因為后端訪問控制的經(jīng)驗比較豐富云芦，所以這里只記錄了前端訪問控制的實現(xiàn)关炼。請注意程腹，前端最多只能做到顯示控制！并不能保證安全儒拂，所以后端是一定要做訪問控制的寸潦！
基于角色的訪問控制需要做到兩個層面的訪問控制：
- 控制頁面路由的跳轉(zhuǎn)，沒有權限的用戶不能跳轉(zhuǎn)到指定url
- 頁面元素的顯示控制社痛，沒有對應權限的用戶不能看到該元素
但在此之前见转，我們還有一項重要的事要做。
存儲用戶信息
首先我們要做的蒜哀，并不是和訪問控制有關的事斩箫，首先我們要保存好用戶信息。包括用戶的基本信息撵儿，如用戶名乘客、真實姓名；以及用戶角色淀歇。下面是數(shù)據(jù)結(jié)構(gòu)：
user = {
username:"",
realname:"",
role:""
}
存儲的時候就將整個user存儲易核，但存在哪里呢？考慮到必須在任何頁面都可以訪問到浪默，第一反應是存儲到$rootScope中牡直，但我們應該盡量避免使用$rootScope；除此之外浴鸿，我們可以存儲在頂級的controller或者是全局的constant中井氢，這兩種解決方案都可以，但它們的問題就是一旦頁面刷新岳链，就不管用了（$rootScope也一樣）花竞。考慮到user這個變量的生命周期應該要與session相同，所以约急，我使用了SessionStorage零远。
在創(chuàng)建controller時，需要加入$sessionStorage：
app.controller('controller',['$sessionStorage', function($sessionStorage){}]);
在登錄成功后厌蔽，將user存儲到SessionStorage中：
$sessionStorage.USER = user;
好了牵辣，之后通過$sessionStorage就可以獲取到用戶信息了。
user = $sessionStorage.USER;
控制頁面路由的跳轉(zhuǎn)
下面我們開始實現(xiàn)第一點：控制頁面路由的跳轉(zhuǎn)奴饮。
要做到第一點比較容易纬向，Angular路由改變時會觸發(fā)$stateChangeStart事件（我用的是stateProvider，所以監(jiān)聽stateChangeStart戴卜，如果是用的route或是location逾条，應該監(jiān)聽它們對應的事件），監(jiān)聽此事件投剥，在里面根據(jù)訪問的url以及用戶角色進行權限判斷师脂，比如登錄的判斷就可以在里面做，訪問那個url需要登錄就直接跳轉(zhuǎn)到登錄界面江锨。
首先先寫一個auth服務吃警，用于權限認證：
/**
* 基于角色的訪問控制
*/
App.service("auth", ["$http","$sessionStorage", function($http, $sessionStorage){
var roles = []; // 從后端數(shù)據(jù)庫獲取的角色表
// 從后端獲取的角色權限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(".", "\\\.").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列表，也從后臺獲取泰鸡，可通過后臺配置债蓝。這樣，每次新增角色盛龄，我們就可以動態(tài)為其配置訪問權限饰迹。
最重要的是isAccessUrl方法，傳入url后余舶，isAccessUrl首先會通過$sessionStorage獲取用戶信息啊鸭，取得用戶角色，然后看用戶角色是否在角色表中匿值；若在角色表中赠制，就看此角色是否有訪問url的權限。我們在后臺配置的時候挟憔，是直接指定狀態(tài)钟些，但如果沒有通配符*的話烟号，那么每一個頁面都得寫一個url，所以政恍，就增加了通配符 * 功能汪拥，然后將url列表中的每個url轉(zhuǎ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)在就實現(xiàn)了url的訪問控制宗弯。
頁面元素的顯示控制
至于第二點铣焊，我的解決方案是自定義指令，下面是示例：
<div zg-access="TEST_ACCESS"></div>
注意罕伯，這里傳入的不是角色曲伊，而是權限。因為用戶角色是可以動態(tài)擴展的追他，如果這里寫的是什么樣的角色才可以訪問這個元素坟募，那以后每新增一個角色都將是一個很大很大的麻煩，因為你得一個個來修改代碼邑狸。下面是自定義指令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) {
// 初始為不可見狀態(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;
}
// 獲取元素權限
var access = attr["zgAccess"];
// 將此權限上傳到后端的數(shù)據(jù)庫
(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按鈕將不可用。
轉(zhuǎn)載請注明原文地址 http://www.zgljl2012.com/2016/08/16/angularjsshi-xian-ji-yu-jiao-se-de-qian-duan-fang-wen-kong-zhi/
