首頁 web前端 js教程 Angularjs中的頁面存取權限怎麼設定

Angularjs中的頁面存取權限怎麼設定

Dec 07, 2016 am 10:46 AM
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配置,資料什麼的都是從後端請求的,狀態不對也請求不到資料的,所以攻陷資料庫才算是真黑,從前端的腳本做攔截只是玩玩測試;

  繼續發掘其他的優化方法,有大神有更好的方法可以交流下;先到這裡吧。


本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

2022年最新5款的angularjs教學從入門到精通 2022年最新5款的angularjs教學從入門到精通 Jun 15, 2017 pm 05:50 PM

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

使用PHP和AngularJS建立響應式網站,提供優質的使用者體驗 使用PHP和AngularJS建立響應式網站,提供優質的使用者體驗 Jun 27, 2023 pm 07:37 PM

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

使用PHP和AngularJS建立Web應用 使用PHP和AngularJS建立Web應用 May 27, 2023 pm 08:10 PM

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

使用Flask和AngularJS建立單頁Web應用程式 使用Flask和AngularJS建立單頁Web應用程式 Jun 17, 2023 am 08:49 AM

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

AngularJS基礎入門介紹 AngularJS基礎入門介紹 Apr 21, 2018 am 10:37 AM

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

如何在PHP編程中使用AngularJS? 如何在PHP編程中使用AngularJS? Jun 12, 2023 am 09:40 AM

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

使用PHP和AngularJS開發一個線上文件管理平台,方便文件管理 使用PHP和AngularJS開發一個線上文件管理平台,方便文件管理 Jun 27, 2023 pm 01:34 PM

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

如何使用PHP和AngularJS進行前端開發 如何使用PHP和AngularJS進行前端開發 May 11, 2023 pm 05:18 PM

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

See all articles