當前位置:首頁 » 網頁前端 » 許可權數前端
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

許可權數前端

發布時間: 2022-09-03 03:28:00

A. html怎麼在前端實現角色許可權控制

html在前端實現角色許可權控制操作:

1、框架提供了按鈕許可權的擴展服務,我們可以通過簡單的擴展來注冊我們自己的許可權項,我們通過繼承AbstractMenuPriv來實現我們的按鈕許可權類;

B. shiro前端多角色的許可權怎麼寫

一兩句話說不清楚,我推薦一套完整已經實現了你說的功能的項目給你。

Shiro介紹文檔:http://www.sojson.com/shiro
Demo已經部署到線上,地址是http://shiro.itboy.net,
管理員帳號:admin,密碼:sojson.com 如果密碼錯誤,請用sojson。
PS:你可以注冊自己的帳號,然後用管理員賦許可權給你自己的帳號,但是,每20分鍾會把數據初始化一次。建議自己下載源碼,讓Demo跑起來,然後跑的更快。

C. 許可權管理(React)

公司需要做一款產品,裡面需要有一個平台用來類似手機APP似的房子不同的子產品入口(類快捷圖標),各子產品間實現單點登錄,創建不同賬戶級別,可以分配產品許可權,產品資源許可權,產品操作級許可權。

本產品,最後許可權做了雙重控制,前後端都控制, 本文只從前端角度進行總結。

賬戶所擁有的產品許可權信息,登錄後後台將會返回數組形式,每項包含一些信息,至於這些產品信息管理,也在後台系統中進行統一管理配置,之後將會在資源許可權提及。

其中,主要是url來進行跳轉,這里有個問題:url里的路徑有時是同一域名下的產品,也可以是一些以前的產品路徑,這就需要進行url判斷

當然,有人會問,如果直接進入一個產品地址,如何判斷登錄呢?
我們前後端約定好一個未登錄code碼 401

其實前端也將登錄後的用戶信息存入了localstorage, 退出登錄後將會銷毀,這也能進行登錄驗證,但是不是很准確;當然這里其實還得進行路由許可權驗證,這下面將會講到。

路由許可權設計有些考慮的問題:

後台系統資源管理設計

資源管理採用樹形結構,同級葉子可以進行拖拽調換位置展示導航菜單,每級葉子均可以添加葉子,刪除修改。葉子的信息這里有些特有的設計:

登錄後,對顯示菜單進行渲染後,要對訪問的路由進行訪問許可權審核檢查:

操作許可權管理界面

操作許可權主要是設計了一個webkey配置,方便前端的操作許可權的檢測。操作許可權是進行統一管理的,路徑資源管理下可以進行操作許可權的勾選配置。
操作許可權由於涉及到按鈕級,也就是組件級,不能在每個頁面單獨配置,那樣需求改動,將會陷入深坑。我採用的 HOC 高階組件的封裝套路:

界面中使用也是很簡單:

這樣採用HOC進行封裝,可以進行一些別的需要擴展:加入操作動畫,改變樣式等。

不同的用戶登錄以後,對數據范圍的許可權是有限制的,那些能夠訪問,那些不能訪問在產品設計的是就已經定義好,當訪問一個當前登錄用戶無權訪問的 API 或者數據的時候,API 響應中會返回對應的 code, 這個 code 是提前就前後的約定好的值。
這部分許可權需要在 xhr api 層調用介面時進行數據許可權的判斷

總結一下,其實前端在做許可權控制的時候,依賴於後端 API 返回的配置信息,所以在許可權設計,路由設計,數據結構設計的時候,前後端一定要約定好。

D. 前端如何控制用戶許可權

1. UI處理(根據用戶擁有的許可權,判斷頁面上的一些內容是否顯示)

2. 路由處理(當用戶訪問一個它沒有許可權訪問的url時,跳轉到一個錯誤提示的頁面)

3. HTTP請求處理(當我們發送一個數據請求,如果返回的status是401或者401,則通常重定向到一個錯誤提示的頁面)

如何實現?

首先需要在Angular啟動之前就獲取到當前用戶的所有的permissions,然後比較優雅的方式是通過一個service存放這個映射關系.對於UI處理一個頁面上的內容是否根據許可權進行顯示,我們應該通過一個directive來實現.當處理完這些,我們還需要在添加一個路由時額外為其添加一個"permission"屬性,並為其賦值表明擁有哪些許可權的角色可以跳轉這個URL,然後通過Angular監聽routeChangeStart事件來進行當前用戶是否擁有此URL訪問許可權的校驗.最後還需要一個HTTP攔截器監控當一個請求返回的status是401或者403時,跳轉頁面到一個錯誤提示頁面.

大致上的工作就是這些,看起來有些多,其實一個個來還是挺好處理的.

在Angular運行之前獲取到permission的映射關系

Angular項目通過ng-app啟動,但是一些情況下我們是希望Angular項目的啟動在我們的控制之中.比如現在這種情況下,我就希望能獲取到當前登錄用戶的所有permission映射關系後,再啟動Angular的App.幸運的是Angular本身提供了這種方式,也就是angular.bootstrap().看的仔細的人可能會注意到,這里使用的是$.get(),沒有錯用的是jQuery而不是Angular的$resource或者$http,因為在這個時候Angular還沒有啟動,它的function我們還無法使用.

進一步使用上面的代碼可以將獲取到的映射關系放入一個service作為全局變數來使用.

在取得當前用戶的許可權集合後,我們將這個集合存檔到對應的一個service中,然後又做了2件事:

(1) 將permissions存放到factory變數中,使之一直處於內存中,實現全局變數的作用,但卻沒有污染命名空間.

(2) 通過$broadcast廣播事件,當許可權發生變更的時候.

如何確定UI組件的依據許可權進行顯隱

這里我們需要自己編寫一個directive,它會依據許可權關系來進行顯示或者隱藏元素.

這里看到了比較理想的情況是通關一個has-permission屬性校驗permission的name,如果當前用戶有則顯示,沒有則隱藏.

擴展一下之前的factory:

路由上的依許可權訪問

這一部分的實現的思路是這樣: 當我們定義一個路由的時候增加一個permission的屬性,屬性的值就是有哪些許可權才能訪問當前url.然後通過routeChangeStart事件一直監聽url變化.每次變化url的時候,去校驗當前要跳轉的url是否符合條件,然後決定是跳轉成功還是跳轉到錯誤的提示頁面.

router.js:

mainController.js 或者 indexController.js (總之是父層Controller)

這里依然用到了之前寫的hasPermission,這些東西都是高度可復用的.這樣就搞定了,在每次view的route跳轉前,在父容器的Controller中判斷一些它到底有沒有跳轉的許可權即可.

HTTP請求處理

這個應該相對來說好處理一點,思想的思路也很簡單.因為Angular應用推薦的是RESTful風格的介面,所以對於HTTP協議的使用很清晰.對於請求返回的status code如果是401或者403則表示沒有許可權,就跳轉到對應的錯誤提示頁面即可.

當然我們不可能每個請求都去手動校驗轉發一次,所以肯定需要一個總的filter.代碼如下:

寫到這里我們就基本實現了在這種前後端分離模式下,前端部分的許可權管理和控制。

E. 特殊許可權和標准許可權區別是什麼

特殊許可權就是額外加多給用戶使用的某種特別許可權,標准許可權就是一般日常使用的普通許可權。特殊許可權更大。

許可權是用戶可以訪問的資源,包括頁面許可權、操作許可權、數據許可權:

頁面許可權:即用戶登錄系統可以看到的頁面,由菜單來控制,菜單包括一級菜單和二級菜單,只要用戶有一級和二級菜單的許可權,那麼用戶就可以訪問頁面操作許可權。

即頁面的功能按鈕,包括查看、新增、修改、刪除、審核等,用戶點擊刪除按鈕時,後台會校驗用戶角色下的所有許可權是否包含該刪除許可權,如果是,就可以進行下一步操作,反之提示無許可權。有的系統要求"可見即可操作"。

意思是如果頁面上能夠看到操作按鈕,那麼用戶就可以操作,要實現此需求,這里就需要前端來配合,前端開發把用戶的許可權信息緩存,在頁面判斷用戶是否包含此許可權,如果有,就顯示該按鈕,如果沒有。

就隱藏該按鈕。某種程度上提升了用戶體驗,但是在實際場景可自行選擇是否需要這樣做。數據許可權:數據許可權就是用戶在同一頁面看到的數據是不同的,比如財務部只能看到其部門下的用戶數據,采購部只看采購部的數據。

在一些大型的公司,全國有很多城市和分公司,比如杭州用戶登錄系統只能看到杭州的數據,上海用戶只能看到上海的數據,解決方案一般是把數據和具體的組織架構關聯起來,舉個例子,再給用戶授權的時候。

用戶選擇某個角色同時綁定組織如財務部或者合肥分公司,那麼該用戶就有了該角色下財務部或合肥分公司下的的數據許可權。

F. 後台管理系統 許可權分配前端怎麼分配

1、最簡單的就是登陸控制了。
2、然後是簡單的許可權控制到功能(頁面),這時候你需要知道數據表怎麼設計,
SQL怎麼查詢,代碼如何判斷。
3、再往上就開始考慮角色的設計。
4、考慮功能細節的控制(新增、更新、刪除、...)
5、考慮Scalability、Performance、User-Friendly....

G. 系統許可權功能的設計

    幾乎所有的管理後台都會涉及到許可權的設計,許可權控制是管理後台的重要功能,可以有效的提高系統的安全性,減少誤操作、數據泄漏等風險的發生。但是,很多產品經理會對許可權功能有一點害怕的心理,一方面是由於能參考的實例較少,許可權管理算是一個「系統級」的基礎功能,一般系統中只有管理員可以操作,不像其他功能可以通過去其他系統中試用體驗,另一方面,對於許可權功能普通用戶無法操作使用,所以存在感較低,做好了也不會出彩,可沒做好就會導致整個流程不通、產品崩潰。

一 RBAC 模型

    目前,接受度較高的功能許可權模型是RBAC(Role-Based Access Control)模型。在RBAC中,許可權與角色相關聯,用戶通過成為適當角色的成員而得到這些角色的許可權。這就極大地簡化了許可權的管理。在一個組織中,角色是為了完成各種工作而創造,用戶則依據它的責任和資格來被指派相應的角色,用戶可以很容易地從一個角色被指派到另一個角色。角色可依新的需求和系統的合並而賦予新的許可權,而許可權也可根據需要而從某角色中回收。

1.角色的作用

如果沒有角色的概念,直接用戶對應許可權,雖然會更加靈活,但是後台的數據表設計會變得復雜,操作成本也會很高,同時容錯能力也會變得很差。

而引入「角色」概念後,用戶與角色可為多對一或多對多的關系,當一個用戶的角色為多對多時,當前用戶的許可權是多個角色的並集。此時只需要為角色賦予許可權,能夠大大減輕管理負擔,同時將用戶與許可權解耦,提供更大的靈活性,同時整個設計的容錯能力也提高了很多。

2.引入用戶組

   一些大型的平台上,如果用戶數量較大,新增角色時,需要為大量用戶分配新的角色,工作量巨大,此時可以引入用戶組的概念,將這些用戶拉到同一個用戶組中,然後對整個用戶組進行角色的指定,這就大大減少了角色分配的工作量。

同理如果許可權較多時也會存在一樣的問題,對角色進行許可權設置時也需要大量的操作,此時可以考慮引入許可權組的概念,將關聯性較強的許可權大包成組賦予角色,從而減少賦值時的工作量,現實中許可權組的使用相對較少,因為系統中的許可權一般來講是有限的。需要注意的是即使有用戶組或許可權組的存在,也可以允許用戶或許可權與角色直接關聯,這個可以視具體業務情況而定。

下圖所示為mac系統中運行添加用戶組,並以用戶組為單位配置許可權。

3. 角色繼承的RBAC模型

在一個業務場景中,如果角色需區分:設計主管、設計組長、設計成員,並且管理方式為向下兼容時,則需使用角色繼承的RBAC模型。上層角色繼承下層角色的全部許可權,且可額外賦予許可權。

此時除了對角色進行定義,還需要管理角色間的關系,通過關系來體現角色的層級關系,從而達到繼承許可權的效果。角色的繼承關系主要有兩種:樹形圖和有向無環圖。

繼承關系常常來源於公司團隊的組織結構,此時常將角色與組織結構進行關聯達到繼承角色模型的效果。如下圖所示的趙同學,其角色是「三級團隊負責人」,與其並列的小組中有多個「三級團隊負責人」的角色,但依附於左側的組織結構樹,各級負責人僅有查看和操作自己下屬子節點的許可權。

4. 限制的RBAC模型

在一個產品或系統中,部分角色可能是需要隔離的、不允許被同時賦予一個人的。跟大家熟知的「不能既是『運動員』又是『裁判員』 」一個道理。

因此,對於眾多角色中的一組,只能是單選的關系,但多組角色之間可以共同存在。如下圖中,一個用戶可以既為設計師又為管理員,但在設計師角色組中僅能被賦予一個角色,在管理員角色組中也僅能被賦予一個角色。

此外,限制還有可能是數量上的,比如一個產品組中必須有且只有一個管理員,不允許刪除或再分配管理員角色,僅允許將負責人角色變更。

限制的模型不僅僅對分配過程產生影響,有時即使擁有了多種角色,因為不同的角色對同一個功能的使用方式或數據會產生沖突,所以使用時也需要進行限制。如下圖所示為同一時間僅允許以一個身份登錄。

根據不同的業務需求,限制的形式很多。需要注意的是不能僅依賴後端限制,而是要在前端展示清晰的規則和恰當的限制,避免用戶出錯和沮喪。

三、許可權的拆分與設計

通過RBAC模型已經能夠很好的搭建起用戶、角色與許可權之間的關系了。但具體是什麼樣的關系,以及「許可權」這個抽象的概念具體如何規劃?

這些都需要分析清楚才能進一步設計出完善的許可權系統。

首先需要知道,一般產品的許可權由頁面、操作和數據構成。頁面與操作相互關聯,必須擁有頁面許可權,才能分配該頁面下對應的操作許可權。數據可被增刪改查。

整體關系如下圖所示:

因此,在設計之初我們就需要考慮到未來可能區分角色的地方,盡量解耦、模塊化。對於技術來說,每一個頁面模塊、每一個操作都最好使用獨立的介面。對於設計來說,需要保障所有角色因為許可權而屏蔽掉部分操作和數據後,頁面和流程仍能體驗流暢。

保證初期設計支持後,配置許可權時,還需要注意以下幾點:

(1)確定是否支持前端配置

如果角色和許可權相對固定,則一般將角色與許可權的關系可以寫在後台,改動時需要後端變更且重新上線。這種情況適用於公司內部系統等只有一個使用主體的系統。

如果需要自定義角色或者每個角色在不同使用者的場景下有不同的許可權,則需要將角色的定義、角色與許可權之間的配置體現在「前端用戶配置頁面」。這種情況適用於有頻繁變動的自定義角色許可權,和有租戶體系的系統。

(2)以基本單元拆分,以業務邏輯配置

一般可將每個對象的「增、刪、改、查」各自作為一個基本的許可權單元。打個比方,在「人員管理」中,查看人員列表、添加人員、刪除人員、編輯人員信息最好拆分為4個許可權單元。在技術和設計上,我們希望能盡量做到解耦和模塊化。

但是在業務層面有些操作卻是一體的。這些不能拆開的許可權在「前端用戶配置頁面」中建議打包成一個整體提供配置。例如:如果我們確定在系統的現有和未來業務中,僅分為普通成員有「人員管理」的查看許可權,管理員有操作許可權,則可將「增、刪、改」三個基本許可權單位合並為「操作」許可權進行配置。

(3)頁面許可權優先於操作和數據許可權

必須配置了頁面模塊許可權後,才能配置當前頁面模塊下具體的操作許可權,以及頁面模塊的數據展示許可權。

(4)查看許可權優先於增刪改許可權

正常情況下,一定要先能查看某個模塊或操作,其它的增刪改操作才有意義。因此在設計時,應在獲取查看許可權前限制其它許可權的配置,或者配置其它許可權時默認賦予查看許可權。

(5)角色與許可權的多種關系

角色與許可權的關系不僅是單純「是/否關系」,還包括以某種限制進行操作,和以某種程度訪問數據。

例如在「人員管理」中:

數據范圍:用戶擁有查看人員列表的許可權,但僅能查看自己所在的團隊;數據邊界限制(上限等):添加人員時不能超過20個等。數據欄位:HR能查看人員列表中包括職級、薪資等欄位,其它角色僅能查看姓名郵箱等欄位;

(6)角色與許可權的設計表達

在傳達一個系統的許可權設計規則時,設計師常常習慣用主觀最直接的方式表達想法,如用「當……時,就……」的句式來表達。但一個平台中涉及的許可權規則是非常多的,當通篇以這樣的形式描述時,表達對象將很難理解。

正確的描述方式:更清晰的是基於開發的語言,和技術模型的結果進行表達。將各角色與許可權單元繪製成網格,每個交叉點網格中描述該角色與許可權的數據關系和限制。

如下圖所示:

四、需要注意的Tips

1. 隱形的admin

在可自定義角色和許可權的系統中,一般需要預留一個admin角色來進行系統的初始配置,用於添加首批的業務人員和配置基本的角色。

有的系統中允許存在上帝視角的admin角色,則其可以作為「超級管理員」顯示在角色配置的列表中。有的系統中不允許這種角色存在,則可將這種角色設置為隱形的狀態,僅賦予維護系統的工作人員。

2. 初始許可權的賦予

對於允許用戶自行加入的系統,需要設定一至多個默認的角色,有時可以是僅有最基礎許可權的「遊客」角色。

初始許可權還可以與用戶既有的某些數據欄位進行關聯,如添加用戶時獲取到用戶的崗位為「設計師」,則直接賦予「設計師」角色的許可權。

3. 人員管理中對自己的處理

在人員管理中,管理員角色處理自己時需要額外注意。因為如果修改或刪除了自己角色後,可能導致系統沒有管理角色,從而無法添加其他成員和正常運行。設計時可添加判斷,當自己為唯一管理角色時,禁止編輯和刪除。

4. 無頁面許可權的提示

雖然可以通過頁面許可權限制直接隱藏當前用戶沒有許可權的頁面,但不能排除用戶獲取到許可權外的url地址。當用戶意外訪問到沒有許可權的頁面時務必提供「無許可權」的提示,避免用戶認為系統bug。

最後

總結一下,整個許可權系統設計就是定義各個節點和節點間關系的過程。

節點包括:

用戶;用戶組;角色;角色組;許可權(頁面、操作、數據);許可權組(頁面、操作、數據);

關系包括:

是/否關系;繼承關系;限制關系(互斥、范圍限制、邊界限制、欄位限制……)

H. 菜單許可權是對前端菜單的許可權嗎

對的,用戶菜單里的才是該用戶真正有許可權使用的事務代碼。SAP標准菜單是針對所有人一樣的,不是每個事務

I. 請教XX管理系統的前端頁面展示和後端許可權控制的一般解決方案

前端面向的是用戶編程,就是用戶可以看得到摸得到的。UI就是其中的一部分。後端是面向服務(伺服器)編程,用戶是無須知道裡面的操作的。舉個例子。比如簡單的登陸功能。前端的只要做好兩個文本控制項與一個按鈕控制項,並且監聽按鈕的點擊事件,將兩個文本的參數按照協議發送到伺服器端上。這就是前端要做的。而後端,伺服器就要接收發送過來的消息並且調用資料庫驗證用戶名與密碼。成功後返回結果。

J. html 怎麼在前端實現角色許可權控制

html在前端實現角色許可權控制操作:

1、框架提供了按鈕許可權的擴展服務,我們可以通過簡單的擴展來注冊我們自己的許可權項,我們通過繼承AbstractMenuPriv來實現我們的按鈕許可權類;