angularjs中的頁面訪問權限設置

時間 2019-12-07

原文原文鏈接

　　11月在趕一個項目，這陣子比較忙，擠擠時間更一篇博客吧，如標題所述說說在ng中頁面訪問權限控制的問題，水平有限各位看官見諒；　　php

　　在以往的項目中，先後端常見的配合方式是前端提供頁面和ui加一點DuangDuangDuang的效果，後端搭建框架數據結構和數據交互(數據交互先後端有交集)，不論是.net、java or php都能一對多的提供前端服務，然而在新形式下項目中運用了前端框架，開發狀況就不同了，好比我要說的這是在angular框架下完成的開發，模式是後端提供服務和api文檔，頁面和數據交互及邏輯處理由前端完成，前端儼然是個徹底的programer了，這個過程當中就會遇到以前意想不到的問題(若是沒有作事後端開發)，好比頁面權限控制，不得不說，使用前端的方式去作這些設置比較糾結，由於這方面的數據，也就是這些權限的‘標示’，後端運行的時候是能夠直接得到的，即像獲取字段數據a.b點一下就出來了，而前端只能用http請求的方式獲取，繁瑣麻煩；前端

　　其實在ng中作頁面訪問權有不少種方法，各有利弊，運用的比較多的是攔截器，攔截器使得在前端日後端發送http請求以前或以後作一些操做，好比全局監測用戶是否登陸，沒登錄就要跳轉的登陸頁面，登陸就能夠訪問頁面；攔截器的使用每每配合後臺數據，也就是獲取到最新的‘標示’，來肯定這個頁面或者下個頁面要作什麼操做；而這裏我使用的是一種用前端控制的方式，不用數據交互，理念就是定義好不一樣等級/階段能夠訪問的頁面，在路由的地方做攔截，針對一些不一樣等級/階段訪問權限定義明確的能夠參考使用這種方法，代碼以下：java

......
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監聽(我這裏使用了an-route-ui)，當監聽到路由跳轉的時候就進行檢測，這裏設想的可訪問‘標示’的status數組裏包含每一個層級/階段可訪問的頁面/路由，好比status裏是須要檢測的全集，status0、1 2分別是不一樣的層級/階段的權限訪問集合，也便是ng中路由跳轉的哈希值，也就表明了可訪問的頁面，利用這種檢測手段，沒有訪問權限的用戶就不能訪問某些頁面，好比用戶a的的層級階段配置是status1,包含user.c和user.d，initObj.getStatus()返回了他的狀態碼是1，當他想訪問user.a頁面的時候，就會進入initObj.getStatus()=="1"的判斷，可是他的配置可訪問頁面不包括user.a，也即!status1.contains(toState.name)（toState.name返回要跳轉的頁面，這裏返回user.a），接下來進入下面的操做，進入公共頁面或提示頁面，原理基本是這樣；angularjs

　　固然，這種方式跟後端的控制來講，是很是不安全的，也不嚴謹，由於就算項目中腳本進行發佈壓縮混淆後，細細瀏覽仍是能找到這裏的設置痕跡的，而且腳本在運行以前是可編輯的，這就會形成很大的漏洞；不過在一些小項目中使用這些配置夠用了，而且就算有人修改了這個status配置，數據什麼的都是從後端請求的，狀態不對也請求不到數據的，因此攻陷數據庫纔算是真黑，從前端的腳本作攔截只是玩玩測試；數據庫

　　繼續發掘其餘的優化方法，有大神有更好的方法能夠交流下；先到這裏吧。後端