AngularJs基于角色的前端訪問控制的實現(xiàn)
最近做的項目是使用Angular做一個單頁應用，但因為用戶有不同的角色（管理員、編輯、普通財務人員等），所以需要進行不同角色的訪問控制。
因為后端訪問控制的經(jīng)驗比較豐富，所以這里只記錄了前端訪問控制的實現(xiàn)。請注意，前端最多只能做到顯示控制！并不能保證安全，所以后端是一定要做訪問控制的！
基于角色的訪問控制需要做到兩個層面的訪問控制：
- 控制頁面路由的跳轉，沒有權限的用戶不能跳轉到指定url
- 頁面元素的顯示控制，沒有對應權限的用戶不能看到該元素
但在此之前，我們還有一項重要的事要做。
存儲用戶信息
首先我們要做的，并不是和訪問控制有關的事，首先我們要保存好用戶信息。包括用戶的基本信息，如用戶名、真實姓名；以及用戶角色。下面是數(shù)據(jù)結構：
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;
控制頁面路由的跳轉
下面我們開始實現(xiàn)第一點：控制頁面路由的跳轉。
要做到第一點比較容易，Angular路由改變時會觸發(fā)$stateChangeStart事件（我用的是stateProvider，所以監(jiān)聽stateChangeStart，如果是用的route或是location，應該監(jiān)聽它們對應的事件），監(jiān)聽此事件，在里面根據(jù)訪問的url以及用戶角色進行權限判斷，比如登錄的判斷就可以在里面做，訪問那個url需要登錄就直接跳轉到登錄界面。
首先先寫一個auth服務，用于權限認證：
/**
* 基于角色的訪問控制
*/
App.service("auth", ["$http","$sessionStorage", function($http, $sessionStorage){
var roles = []; // 從后端數(shù)據(jù)庫獲取的角色表
// 從后端獲取的角色權限Url映射表，結構為{"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是角色，從后臺獲?。籾rlPermissions是每個角色對應的能被其訪問的url列表，也從后臺獲取，可通過后臺配置。這樣，每次新增角色，我們就可以動態(tài)為其配置訪問權限。
最重要的是isAccessUrl方法，傳入url后，isAccessUrl首先會通過$sessionStorage獲取用戶信息，取得用戶角色，然后看用戶角色是否在角色表中；若在角色表中，就看此角色是否有訪問url的權限。我們在后臺配置的時候，是直接指定狀態(tài)，但如果沒有通配符的話，那么每一個頁面都得寫一個url，所以，就增加了通配符 功能，然后將url列表中的每個url轉化為正則表達式，再來驗證，這樣配置就靈活了很多。
最后是在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按鈕將不可用。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了在Angular中如何監(jiān)聽某個值的變化問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Angular路由ui-router配置詳解，非常不錯，具有一定得參考借鑒價值，需要的朋友參考下吧2018-08-08
Angular 實現(xiàn)輸入框中顯示文章標簽的實例代碼
這篇文章主要介紹了Angular 實現(xiàn)輸入框中顯示文章標簽的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
AngularJS Toaster是一個 AngularJS 提示框.基于angular v1.2.6 及以上和angular-animate.這篇文章主要介紹了AngularJS Toaster使用詳解,需要的朋友可以參考下2017-02-02
angularjs中使用ng-bind-html和ng-include的實例
下面小編就為大家?guī)硪黄猘ngularjs中使用ng-bind-html和ng-include的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
今天小編就為大家分享一篇ng-repeat指令在迭代對象時的去重方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要為大家介紹了Angular.js實現(xiàn)掃碼槍掃碼并生成二維碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了angularjs指令之綁定策略（@、=、&）,AngularJS提供了幾種方法能夠?qū)⒅噶顑?nèi)部的隔離作用域，同指令外部的作用域進行數(shù)據(jù)綁定。2017-04-04
本文主要介紹AngularJS ng-class-even 指令,這里整理了ng-class-even基礎知識資料,并附實例代碼和效果圖,學習AngularJS指令的朋友可以看下2016-08-08
這篇文章主要介紹了AngularJS表單提交的方法,結合完整實例形式分析了AngularJS表單提交過程中的數(shù)據(jù)綁定、模塊、控制器等相關操作技巧,需要的朋友可以參考下2017-02-02