AngularJs基于角色的前端訪問控制的實現(xiàn)
最近做的項目是使用Angular做一個單頁應用，但因為用戶有不同的角色（管理員、編輯、普通財務人員等），所以需要進行不同角色的訪問控制。
因為后端訪問控制的經驗比較豐富，所以這里只記錄了前端訪問控制的實現(xiàn)。請注意，前端最多只能做到顯示控制！并不能保證安全，所以后端是一定要做訪問控制的！
基于角色的訪問控制需要做到兩個層面的訪問控制：
- 控制頁面路由的跳轉，沒有權限的用戶不能跳轉到指定url
- 頁面元素的顯示控制，沒有對應權限的用戶不能看到該元素
但在此之前，我們還有一項重要的事要做。
存儲用戶信息
首先我們要做的，并不是和訪問控制有關的事，首先我們要保存好用戶信息。包括用戶的基本信息，如用戶名、真實姓名；以及用戶角色。下面是數(shù)據結構：
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)聽此事件，在里面根據訪問的url以及用戶角色進行權限判斷，比如登錄的判斷就可以在里面做，訪問那個url需要登錄就直接跳轉到登錄界面。
首先先寫一個auth服務，用于權限認證：
/**
* 基于角色的訪問控制
*/
App.service("auth", ["$http","$sessionStorage", function($http, $sessionStorage){
var roles = []; // 從后端數(shù)據庫獲取的角色表
// 從后端獲取的角色權限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ù)據庫
(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按鈕將不可用。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
詳解angular路由高亮之RouterLinkActive
這篇文章主要介紹了詳解angular路由高亮之RouterLinkActive，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
Angular?Tree?Shaking優(yōu)化機制原理詳解
這篇文章主要為大家介紹了Angular?Tree?Shaking優(yōu)化機制原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
這篇文章主要詳細介紹了AngularJS內置指令的使用方法，非常詳細，常用的一些指令操作都做了總結，有需要的小伙伴參考下2015-02-02
這篇文章主要介紹了AngularJS中isolate scope的用法,結合實例形式分析了isolate scope的幾種具體使用方式,需要的朋友可以參考下2016-11-11
這篇文章主要為大家詳細介紹了Angularjs中的依賴注入，AngularJS提供了一個至高無上的依賴注入機制，感興趣的小伙伴們可以參考一下2016-03-03
本文給大家分享的是使用angularjs制作一個完整的表格的真實案例，結合前幾篇的內容，把整個完整的代碼分享給大家，有需要的小伙伴可以參考下2016-01-01
Angular.js實現(xiàn)注冊系統(tǒng)的實例詳解
Angular.js是Google開發(fā)的前端技術框架，最近一直在學習Angular.js，通過對angular.js的簡單理解后發(fā)現(xiàn)，angular.js通過一些簡單的指令即可實現(xiàn)對DOM元素的操作，其特色為雙向數(shù)據綁定，下面這篇文章給大家詳細介紹Angular.js實現(xiàn)注冊系統(tǒng)的方法，一起來看看吧。2016-12-12
這篇文章主要介紹了AngularJS的HTML DOM支持情況,包括ng-hide和ng-click指令的使用,需要的朋友可以參考下2015-06-06
本篇文章主要介紹了淺談angularJS的$watch失效問題的解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-08-08
Angular ng-repeat 對象和數(shù)組遍歷實例
這篇文章主要介紹了Angular ng-repeat對象和數(shù)組遍歷的相關資料,并附代碼示例，需要的朋友可以參考下2016-09-09