Angularjs中的頁面訪問權(quán)限怎么設(shè)置
在以往的項目中,前后端常見的配合方式是前端提供頁面和ui加一點DuangDuangDuang的效果,后端搭建框架數(shù)據(jù)結(jié)構(gòu)和數(shù)據(jù)交互(數(shù)據(jù)交互前后端有交集),不管是.net、java or php都能一對多的提供前端服務(wù),然而在新形式下項目中運用了前端框架,開發(fā)情況就不一樣了,比如我要說的這是在angular框架下完成的開發(fā),模式是后端提供服務(wù)和api文檔,頁面和數(shù)據(jù)交互及邏輯處理由前端完成,前端儼然是個完全的programer了,這個過程中就會遇到之前意想不到的問題(如果沒有做過后端開發(fā)),比如頁面權(quán)限控制,不得不說,使用前端的方式去做這些設(shè)置比較糾結(jié),因為這方面的數(shù)據(jù),也就是這些權(quán)限的‘標(biāo)示',后端運行的時候是可以直接獲得的,即像獲取字段數(shù)據(jù)a.b點一下就出來了,而前端只能用http請求的方式獲取,繁瑣麻煩;
其實在ng中做頁面訪問權(quán)有很多種方法,各有利弊,運用的比較多的是攔截器,攔截器使得在前端往后端發(fā)送http請求之前或之后做一些操作,比如全局監(jiān)測用戶是否登錄,沒登陸就要跳轉(zhuǎn)的登錄頁面,登錄就可以訪問頁面;攔截器的使用往往配合后臺數(shù)據(jù),也就是獲取到最新的‘標(biāo)示',來確定這個頁面或者下個頁面要做什么操作;而這里我使用的是一種用前端控制的方式,不用數(shù)據(jù)交互,理念就是定義好不同等級/階段可以訪問的頁面,在路由的地方作攔截,針對一些不同等級/階段訪問權(quán)限定義明確的可以參考使用這種方法,代碼如下:
......
app.run(['$rootScope', '$state', '$window', function($rootScope, $state, $window) {
$rootScope.$on('$stateChangeStart', function(event, toState, toStateParams) {
//用戶訪問等級階段, 0 1 2
Array.prototype.contains = function(needle) {
for(i in this) {
if(this[i] == needle) return true;
}
return false;
}
var status=new Array("user.a","user.b","user.c","user.d","user.e","user.f","user.g");
var status0=new Array("user.a","user.b");
var status1=new Array("user.c","user.d");
var status2=new Array("user.a","user.b","user.c","user.d");
if (status.contains(toState.name)) {
if(initObj.getStatus()=="0"){
if(!status0.contains(toState.name)){
event.preventDefault();
$state.go('user.approve');
}
return;
}
if(initObj.getStatus()=="1"){
if(!status1.contains(toState.name)){
event.preventDefault();
$state.go('user.result');
}
return;
}
if(initObj.getStatus()=="2"){
if(!status2.contains(toState.name)){
event.preventDefault();
$state.go('user.result');
}
return;
}
}
})
}])
......
如碼所示,在ng的run里加上state監(jiān)聽(我這里使用了an-route-ui),當(dāng)監(jiān)聽到路由跳轉(zhuǎn)的時候就進(jìn)行檢測,這里設(shè)想的可訪問‘標(biāo)示'的status數(shù)組里包含每個層級/階段可訪問的頁面/路由,比如status里是需要檢測的全集,status0、1 2分別是不同的層級/階段的權(quán)限訪問集合,也即是ng中路由跳轉(zhuǎn)的哈希值,也就代表了可訪問的頁面,利用這種檢測手段,沒有訪問權(quán)限的用戶就不能訪問某些頁面,比如用戶a的的層級階段配置是status1,包含user.c和user.d,initObj.getStatus()返回了他的狀態(tài)碼是1,當(dāng)他想訪問user.a頁面的時候,就會進(jìn)入initObj.getStatus()=="1"的判斷,但是他的配置可訪問頁面不包括user.a,也即!status1.contains(toState.name)(toState.name返回要跳轉(zhuǎn)的頁面,這里返回user.a),接下來進(jìn)入下面的操作,進(jìn)入公共頁面或提示頁面,原理基本是這樣;
當(dāng)然,這種方式跟后端的控制來說,是非常不安全的,也不嚴(yán)謹(jǐn),因為就算項目中腳本進(jìn)行發(fā)布壓縮混淆后,細(xì)細(xì)瀏覽還是能找到這里的設(shè)置痕跡的,并且腳本在運行之前是可編輯的,這就會造成很大的漏洞;不過在一些小項目中使用這些配置夠用了,并且就算有人修改了這個status配置,數(shù)據(jù)什么的都是從后端請求的,狀態(tài)不對也請求不到數(shù)據(jù)的,所以攻陷數(shù)據(jù)庫才算是真黑,從前端的腳本做攔截只是玩玩測試;
繼續(xù)發(fā)掘其他的優(yōu)化方法,有大神有更好的方法可以交流下;先到這里吧。
還有,光棍節(jié)到了,祝廣大單身狗早日脫單。嘿嘿~~~~
- AngularJS打開頁面隱藏顯示表達(dá)式用法示例
- AngularJS通過$location獲取及改變當(dāng)前頁面的URL
- 微信+angularJS的SPA應(yīng)用中用router進(jìn)行頁面跳轉(zhuǎn),jssdk校驗失敗問題解決
- AngularJs bootstrap搭載前臺框架——基礎(chǔ)頁面
- AngularJs頁面篩選標(biāo)簽小功能
- Angularjs實現(xiàn)多個頁面共享數(shù)據(jù)的方式
- AngularJS頁面訪問時出現(xiàn)頁面閃爍問題的解決
- 使用Jasmine和Karma對AngularJS頁面程序進(jìn)行測試
- 基于AngularJS實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能
- 使用AngularJS實現(xiàn)可伸縮的頁面切換的方法
- AngularJS中update兩次出現(xiàn)$promise屬性無法識別的解決方法
- 模板視圖和AngularJS之間沖突的解決方法
- AngularJS使用ng-inlude指令加載頁面失敗的原因與解決方法
相關(guān)文章
angularjs實現(xiàn)對表單輸入改變的監(jiān)控(ng-change和watch兩種方式)
這篇文章主要介紹了angularjs通過ng-change和watch兩種方式實現(xiàn)對表單輸入改變的監(jiān)控,需要的朋友可以參考下2018-08-08
Angularjs中的事件廣播 —全面解析$broadcast,$emit,$on
下面小編就為大家?guī)硪黄狝ngularjs中的事件廣播 —全面解析$broadcast,$emit,$on。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考,一起跟隨小編過來看看吧2016-05-05
使用Angular CLI生成 Angular 5項目教程詳解
這篇文章主要介紹了使用Angular CLI生成 Angular 5項目的教程詳解 ,需要的朋友可以參考下2018-03-03
使用AngularJS編寫多選按鈕選中時觸發(fā)指定方法的指令代碼詳解
最近做項目時遇到了需要用到多選按鈕選中觸發(fā)事件的功能,小編試著手寫一個指令,具體實現(xiàn)代碼大家參考下本文吧2017-07-07
AngularJS使用指令增強標(biāo)準(zhǔn)表單元素功能
這篇文章主要介紹了AngularJS使用指令增強標(biāo)準(zhǔn)表單元素功能,包括數(shù)據(jù)綁定、建立模型屬性、驗證表單等,感興趣的小伙伴們可以參考一下2016-07-07
AngularJs1.x自定義指令獨立作用域的函數(shù)傳入?yún)?shù)方法
今天小編就為大家分享一篇AngularJs1.x自定義指令獨立作用域的函數(shù)傳入?yún)?shù)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Angular4實現(xiàn)動態(tài)添加刪除表單輸入框功能
這篇文章主要介紹了Angular4實現(xiàn)動態(tài)添加刪除表單輸入框功能,需要的朋友可以參考下2017-08-08

