AngularJs基于角色的前端訪問控制的實(shí)現(xiàn)
最近做的項(xiàng)目是使用Angular做一個(gè)單頁應(yīng)用，但因?yàn)橛脩粲胁煌慕巧ü芾韱T、編輯、普通財(cái)務(wù)人員等），所以需要進(jìn)行不同角色的訪問控制。
因?yàn)楹蠖嗽L問控制的經(jīng)驗(yàn)比較豐富，所以這里只記錄了前端訪問控制的實(shí)現(xiàn)。請注意，前端最多只能做到顯示控制！并不能保證安全，所以后端是一定要做訪問控制的！
基于角色的訪問控制需要做到兩個(gè)層面的訪問控制：
- 控制頁面路由的跳轉(zhuǎn)，沒有權(quán)限的用戶不能跳轉(zhuǎn)到指定url
- 頁面元素的顯示控制，沒有對應(yīng)權(quán)限的用戶不能看到該元素
但在此之前，我們還有一項(xiàng)重要的事要做。
存儲用戶信息
首先我們要做的，并不是和訪問控制有關(guān)的事，首先我們要保存好用戶信息。包括用戶的基本信息，如用戶名、真實(shí)姓名；以及用戶角色。下面是數(shù)據(jù)結(jié)構(gòu)：
user = {
username:"",
realname:"",
role:""
}
存儲的時(shí)候就將整個(gè)user存儲，但存在哪里呢？考慮到必須在任何頁面都可以訪問到，第一反應(yīng)是存儲到rootScope中，但我們應(yīng)該盡量避免使用rootScope；除此之外，我們可以存儲在頂級的controller或者是全局的constant中，這兩種解決方案都可以，但它們的問題就是一旦頁面刷新，就不管用了（$rootScope也一樣）?？紤]到user這個(gè)變量的生命周期應(yīng)該要與session相同，所以，我使用了SessionStorage。
在創(chuàng)建controller時(shí)，需要加入$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路由改變時(shí)會觸發(fā)$stateChangeStart事件（我用的是stateProvider，所以監(jiān)聽stateChangeStart，如果是用的route或是location，應(yīng)該監(jiān)聽它們對應(yīng)的事件），監(jiān)聽此事件，在里面根據(jù)訪問的url以及用戶角色進(jìn)行權(quán)限判斷，比如登錄的判斷就可以在里面做，訪問那個(gè)url需要登錄就直接跳轉(zhuǎn)到登錄界面。
首先先寫一個(gè)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(".", "\\\.").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是每個(gè)角色對應(yīng)的能被其訪問的url列表，也從后臺獲取，可通過后臺配置。這樣，每次新增角色，我們就可以動態(tài)為其配置訪問權(quán)限。
最重要的是isAccessUrl方法，傳入url后，isAccessUrl首先會通過$sessionStorage獲取用戶信息，取得用戶角色，然后看用戶角色是否在角色表中；若在角色表中，就看此角色是否有訪問url的權(quán)限。我們在后臺配置的時(shí)候，是直接指定狀態(tài)，但如果沒有通配符的話，那么每一個(gè)頁面都得寫一個(gè)url，所以，就增加了通配符 功能，然后將url列表中的每個(gè)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ò)展的，如果這里寫的是什么樣的角色才可以訪問這個(gè)元素，那以后每新增一個(gè)角色都將是一個(gè)很大很大的麻煩，因?yàn)槟愕靡粋€(gè)個(gè)來修改代碼。下面是自定義指令zg-access的代碼：
/**
* 元素級別的訪問控制指令
*/
App.directive("zgAccess", function($sessionStorage, $http){
var roles = []; // 角色
var elemPermissions = {}; // 角色元素權(quán)限映射表，如{ "role":{"SEARCH"}}，role有這個(gè)搜索權(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是一個(gè)屬性，用來控制級別，如果是none（默認(rèn)為none），就不顯示元素；如果是disbaled，就是元素不可用（如Button不可用）。
下面是元素示例：
<button ng-click="" zg-access="SEARCH" zg-access-level="disabled">Search</button>
此時(shí)，若以admin角色或者user角色登錄，Search按鈕將不可用。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了在Angular中如何監(jiān)聽某個(gè)值的變化問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Angular路由ui-router配置詳解，非常不錯(cuò)，具有一定得參考借鑒價(jià)值，需要的朋友參考下吧2018-08-08
Angular 實(shí)現(xiàn)輸入框中顯示文章標(biāo)簽的實(shí)例代碼
這篇文章主要介紹了Angular 實(shí)現(xiàn)輸入框中顯示文章標(biāo)簽的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
AngularJS Toaster是一個(gè) AngularJS 提示框.基于angular v1.2.6 及以上和angular-animate.這篇文章主要介紹了AngularJS Toaster使用詳解,需要的朋友可以參考下2017-02-02
angularjs中使用ng-bind-html和ng-include的實(shí)例
下面小編就為大家?guī)硪黄猘ngularjs中使用ng-bind-html和ng-include的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
今天小編就為大家分享一篇ng-repeat指令在迭代對象時(shí)的去重方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Angular.js實(shí)現(xiàn)掃碼槍掃碼并生成二維碼
這篇文章主要為大家介紹了Angular.js實(shí)現(xiàn)掃碼槍掃碼并生成二維碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了angularjs指令之綁定策略（@、=、&）,AngularJS提供了幾種方法能夠?qū)⒅噶顑?nèi)部的隔離作用域，同指令外部的作用域進(jìn)行數(shù)據(jù)綁定。2017-04-04
AngularJS 基礎(chǔ)ng-class-even指令用法
本文主要介紹AngularJS ng-class-even 指令,這里整理了ng-class-even基礎(chǔ)知識資料,并附實(shí)例代碼和效果圖,學(xué)習(xí)AngularJS指令的朋友可以看下2016-08-08
這篇文章主要介紹了AngularJS表單提交的方法,結(jié)合完整實(shí)例形式分析了AngularJS表單提交過程中的數(shù)據(jù)綁定、模塊、控制器等相關(guān)操作技巧,需要的朋友可以參考下2017-02-02