Angularjs中的頁面存取權限怎麼設定
在以往的專案中,前後端常見的配合方式是前端提供頁面和ui加一點DuangDuangDuang的效果,後端搭建框架資料結構和資料互動(資料互動前後端有交集),不管是.net、java or php都能一對多的提供前端服務,然而在新形式下專案中運用了前端框架,開發情況就不一樣了,比如我要說的這是在angular框架下完成的開發,模式是後端提供服務和api文檔,頁面和資料互動及邏輯處理由前端完成,前端儼然是個完全的programer了,這個過程中就會遇到之前意想不到的問題(如果沒有做過後端開發),比如頁面權限控制,不得不說,使用前端的方式去做這些設定比較糾結,因為這方面的數據,也就是這些權限的'標示',後端運行的時候是可以直接獲得的,即像獲取字段數據a.b點一下就出來了,而前端只能用http請求的方式獲取,繁瑣麻煩;
其實在ng中做頁面訪問權有很多種方法,各有利弊,運用的比較多的是攔截器,攔截器使得在前端往後端發送http請求之前或之後做一些操作,例如全域監控使用者是否登錄,沒登陸就要跳轉的登錄頁面,登入就可以存取頁面;攔截器的使用往往配合後台數據,也就是取得到最新的'標示',來確定這個頁面或下個頁面要做什麼操作;而這裡我使用的是一種用前端控制的方式,不用數據交互,理念就是定義好不同等級/階段可以訪問的頁面,在路由的地方作攔截,針對一些不同等級/階段訪問權限定義明確的可以參考使用這種方法,代碼如下:
...... 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),接下來進入下面的操作,進入公共頁面或提示頁面,原理基本上是這樣;
當然,這種方式跟後端的控制來說,是非常不安全的,也不嚴謹,因為就算專案中腳本進行發布壓縮混淆後,細細瀏覽還是能找到這裡的設定痕蹟的,並且腳本在運行之前是可編輯的,這就會造成很大的漏洞;不過在一些小專案中使用這些配置夠用了,並且就算有人修改了這個status配置,資料什麼的都是從後端請求的,狀態不對也請求不到資料的,所以攻陷資料庫才算是真黑,從前端的腳本做攔截只是玩玩測試;
繼續發掘其他的優化方法,有大神有更好的方法可以交流下;先到這裡吧。

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

Javascript 是一個非常有個性的語言. 無論是從程式碼的組織, 還是程式碼的程式設計範式, 或物件導向理論都獨具一格. 而很早就在爭論的Javascript 是不是物件導向語言這個問題, 顯然已有答案. 但是, 即使Javascript 叱吒風雲二十年, 如果想要看懂jQuery, Angularjs, 甚至是React 等流行框架, 觀看《黑馬雲課堂JavaScript 高級框架設計視頻教程》就對了。

在現今資訊時代,網站已成為人們獲取資訊和交流的重要工具。一個響應式的網站能夠適應各種設備,為使用者提供優質的體驗,成為了現代網站開發的熱點。本篇文章將介紹如何使用PHP和AngularJS建立響應式網站,進而提供優質的使用者體驗。 PHP介紹PHP是一種開源的伺服器端程式語言,非常適合Web開發。 PHP具有許多優點,如易於學習、跨平台、豐富的工具庫、開發效

隨著網路的不斷發展,Web應用已成為企業資訊化建設的重要組成部分,也是現代化工作的必要手段。為了讓Web應用能夠方便開發、維護和擴展,開發人員需要選擇適合自己開發需求的技術框架和程式語言。 PHP和AngularJS是兩種非常流行的Web開發技術,它們分別是伺服器端和客戶端的解決方案,透過結合使用可以大大提高Web應用的開發效率和使用體驗。 PHP的優勢PHP

隨著Web技術的快速發展,單頁Web應用程式(SinglePageApplication,SPA)已成為越來越流行的Web應用程式模型。相較於傳統的多頁Web應用程序,SPA的最大優勢在於使用者感受更加流暢,同時伺服器端的運算壓力也大幅減少。在本文中,我們將介紹如何使用Flask和AngularJS來建構一個簡單的SPA。 Flask是一款輕量級的Py

這篇文章介紹的內容是關於AngularJS基礎入門介紹,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下。

隨著Web應用程式的普及,前端框架AngularJS變得越來越受歡迎。 AngularJS是一個由Google開發的JavaScript框架,它可以幫助你建立具有動態Web應用程式功能的網頁應用程式。另一方面,對於後端編程,PHP是非常受歡迎的程式語言。如果您正在使用PHP進行伺服器端編程,那麼結合AngularJS使用PHP將可以為您的網站帶來更多的動態效

隨著網路的普及,越來越多的人使用網路進行檔案傳輸和分享。然而,由於各種原因,使用傳統的FTP等方式進行檔案管理無法滿足現代使用者的需求。因此,建立一個易用、高效、安全的線上文件管理平台已成為了一種趨勢。本文介紹的線上文件管理平台,基於PHP和AngularJS,能夠方便地進行文件上傳、下載、編輯、刪除等操作,並且提供了一系列強大的功能,例如文件共享、搜尋、

隨著網路的普及和發展,前端開發已變得越來越重要。身為前端開發人員,我們需要了解並掌握各種開發工具和技術。其中,PHP和AngularJS是兩種非常有用且受歡迎的工具。在本文中,我們將介紹如何使用這兩種工具進行前端開發。一、PHP介紹PHP是一種流行的開源伺服器端腳本語言,它適用於Web開發,可以在Web伺服器和各種作業系統上運作。 PHP的優點是簡單、快速、便
