在以往的項(xiàng)目中，前后端常見(jiàn)的配合方式是前端提供頁(yè)面和ui加一點(diǎn)DuangDuangDuang的效果，后端搭建框架數(shù)據(jù)結(jié)構(gòu)和數(shù)據(jù)交互(數(shù)據(jù)交互前后端有交集)，不管是.net、java or php都能一對(duì)多的提供前端服務(wù)，然而在新形式下項(xiàng)目中運(yùn)用了前端框架，開(kāi)發(fā)情況就不一樣了，比如我要說(shuō)的這是在angular框架下完成的開(kāi)發(fā)，模式是后端提供服務(wù)和api文檔，頁(yè)面和數(shù)據(jù)交互及邏輯處理由前端完成，前端儼然是個(gè)完全的programer了，這個(gè)過(guò)程中就會(huì)遇到之前意想不到的問(wèn)題(如果沒(méi)有做過(guò)后端開(kāi)發(fā))，比如頁(yè)面權(quán)限控制，不得不說(shuō)，使用前端的方式去做這些設(shè)置比較糾結(jié)，因?yàn)檫@方面的數(shù)據(jù)，也就是這些權(quán)限的‘標(biāo)示'，后端運(yùn)行的時(shí)候是可以直接獲得的，即像獲取字段數(shù)據(jù)a.b點(diǎn)一下就出來(lái)了，而前端只能用http請(qǐng)求的方式獲取，繁瑣麻煩；

　　其實(shí)在ng中做頁(yè)面訪問(wèn)權(quán)有很多種方法，各有利弊，運(yùn)用的比較多的是攔截器，攔截器使得在前端往后端發(fā)送http請(qǐng)求之前或之后做一些操作，比如全局監(jiān)測(cè)用戶(hù)是否登錄，沒(méi)登陸就要跳轉(zhuǎn)的登錄頁(yè)面，登錄就可以訪問(wèn)頁(yè)面；攔截器的使用往往配合后臺(tái)數(shù)據(jù)，也就是獲取到最新的‘標(biāo)示'，來(lái)確定這個(gè)頁(yè)面或者下個(gè)頁(yè)面要做什么操作；而這里我使用的是一種用前端控制的方式，不用數(shù)據(jù)交互，理念就是定義好不同等級(jí)/階段可以訪問(wèn)的頁(yè)面，在路由的地方作攔截，針對(duì)一些不同等級(jí)/階段訪問(wèn)權(quán)限定義明確的可以參考使用這種方法，代碼如下：

......
app.run(['$rootScope', '$state', '$window', function($rootScope, $state, $window) {
$rootScope.$on('$stateChangeStart', function(event, toState, toStateParams) {
//用戶(hù)訪問(wèn)等級(jí)階段， 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)聽(tīng)(我這里使用了an-route-ui)，當(dāng)監(jiān)聽(tīng)到路由跳轉(zhuǎn)的時(shí)候就進(jìn)行檢測(cè)，這里設(shè)想的可訪問(wèn)‘標(biāo)示'的status數(shù)組里包含每個(gè)層級(jí)/階段可訪問(wèn)的頁(yè)面/路由，比如status里是需要檢測(cè)的全集，status0、1 2分別是不同的層級(jí)/階段的權(quán)限訪問(wèn)集合，也即是ng中路由跳轉(zhuǎn)的哈希值，也就代表了可訪問(wèn)的頁(yè)面，利用這種檢測(cè)手段，沒(méi)有訪問(wèn)權(quán)限的用戶(hù)就不能訪問(wèn)某些頁(yè)面，比如用戶(hù)a的的層級(jí)階段配置是status1,包含user.c和user.d，initObj.getStatus()返回了他的狀態(tài)碼是1，當(dāng)他想訪問(wèn)user.a頁(yè)面的時(shí)候，就會(huì)進(jìn)入initObj.getStatus()=="1"的判斷，但是他的配置可訪問(wèn)頁(yè)面不包括user.a，也即!status1.contains(toState.name)（toState.name返回要跳轉(zhuǎn)的頁(yè)面，這里返回user.a），接下來(lái)進(jìn)入下面的操作，進(jìn)入公共頁(yè)面或提示頁(yè)面，原理基本是這樣；

　　當(dāng)然，這種方式跟后端的控制來(lái)說(shuō)，是非常不安全的，也不嚴(yán)謹(jǐn)，因?yàn)榫退沩?xiàng)目中腳本進(jìn)行發(fā)布?jí)嚎s混淆后，細(xì)細(xì)瀏覽還是能找到這里的設(shè)置痕跡的，并且腳本在運(yùn)行之前是可編輯的，這就會(huì)造成很大的漏洞；不過(guò)在一些小項(xiàng)目中使用這些配置夠用了，并且就算有人修改了這個(gè)status配置，數(shù)據(jù)什么的都是從后端請(qǐng)求的，狀態(tài)不對(duì)也請(qǐng)求不到數(shù)據(jù)的，所以攻陷數(shù)據(jù)庫(kù)才算是真黑，從前端的腳本做攔截只是玩玩測(cè)試；

　　繼續(xù)發(fā)掘其他的優(yōu)化方法，有大神有更好的方法可以交流下；先到這里吧。

　　還有，光棍節(jié)到了，祝廣大單身狗早日脫單。嘿嘿~~~~

最新評(píng)論