前後端分離模式下的許可權設計方案

2021-10-02 01:14:51 字數 2327 閱讀 8717

前後端分離模式下,所有的互動場景都變成了資料,傳統業務系統中的許可權控制方案在前端已經不再適用,因此引發了我對許可權的重新思考與設計。

在理解許可權控制之前,需要明白兩個概念:資源和許可權。什麼是資源,對於乙個系統來說,系統內部的所有資訊都可以理解為這個系統的資源。頁面是資源、資料是資源、按鈕是資源、是資源、甚至頁面上一條分割線也可理解為是這個系統的資源。

而許可權就是訪問某個資源所需要的標識。無論系統的許可權如何設計,在使用者登入時,都可以計算得出使用者所擁有的許可權標識集合,也就確定了該使用者能訪問哪些系統資源,這就是我理解的許可權控制的本質。於是我們可以得出:許可權控制是控制登入使用者對於系統資源的訪問。

在弄清前後端在許可權控制中各自的職責是什麼之前,需要理解前後端各自在系統中的職責。這個還是很好理解:

由於前端負責與使用者互動,使用者所能操作的資源入口都是由前端進行控制,那麼前端的許可權控制就包括:

前端路由的許可權控制,過濾非法請求,使用者只能訪問許可權範圍內的頁面資源。

頁面內元件的許可權控制,根據使用者的許可權控制頁面元件的渲染。包括各種按鈕、**、分割線等。

隨著前端元件化的快速發展,使用者所看到的一切均可理解為元件,頁面是個大元件,其內部由各個小組件拼湊而來,那麼前端許可權控制最終落地到對元件的許可權控制。於是腦補了出了最優雅的許可權元件使用方式:

《元件 permissionname='***' />

引上文,系統的一切資源均可進行許可權控制,實際上也可以做到,但在我們實際的操作過程中,往往不需要細化到分割線那種程度。這裡以按鈕級許可權控制為例做實現說明,如果有更細粒度的許可權需求,此思路依然可行。

前端路由許可權控制。使用者登入時拿到使用者擁有的許可權標識集合,在前端儲存。路由變化時,進行許可權判斷,通過則渲染對應頁面元件,否則渲染403元件。示例**:

let haspermission = permission.check(current.permissionname);

封裝bird-button許可權按鈕元件,傳入按鈕所需許可權名,內部進行許可權判斷,通過則渲染按鈕。

測試按鈕
服務端。服務端許可權驗證很好理解。使用***驗證當前請求的許可權。**示例:

public class ssoauthorizeinterceptor extends handlerinterceptoradapter 

string requirepermissions = authorize.permissions();

if(requirepermissions.length==0)return true;

boolean ischeckall = authorize.ischeckall();

userpermissionchecker permissionchecker = authorizemanager.getuserpermissionchecker();

if(!permissionchecker.haspermissions(ticketinfo.getuserid(),requirepermissions,ischeckall))

}return true;

}}

本部落格涉及到的前端許可權控制思路均已在:

專案中實現,專案中除了按鈕級許可權方案還提供了後台業務系統開發中常用的資料元件,包括:

下拉選擇器:bird-selector。

/blob/master/doc/bird-selector.md

全自動資料**:bird-grid。

/blob/master/doc/bird-grid.md

全自動樹表:bird-tree-grid。

/blob/master/doc/bird-tree-grid.md

資料樹:bird-tree。

/blob/master/doc/bird-tree.md

全自動表單:bird-form。

/blob/master/doc/bird-form.md

許可權按鈕:bird-button。

/blob/master/doc/bird-button.md

所有業務元件的理念均是結合服務端介面進行元件的封裝,兼顧靈活性的同時保證更優的業務開發速度。

歡迎指正,提出不同的看法。

前後端分離 通用鑑權方案 (分組許可權)

做了幾個前後端分離的專案,都遇到了許可權管理的問題。這裡總結一下實現的方案及注意事項。鑑權的需求一般是這樣的,假設有 a 主頁 b,c,d 系統配置頁 四個頁面 使用者與頁面是多對多的關係,相互之間會有交叉,所以使用簡單的分級許可權實現起來是很麻煩的。如果新增乙個使用者,使其能訪問abc,就需要新建...

tp前後端不分離原始碼 前後端分離模式踩的坑

前後端分離現在火了很多年,在實際中新技術的使用一般是先在一些大廠中採用,比如在招聘網上大廠的前端招聘node要求比較高,而在中小型廠中對node的要求只是會用webpack打包工具以及npm包管理就可以了。最近幾年傳統公司 中小型公司開始構建前後端分離模式,前後端分離的好處網上文章很多,簡單說前端可...

前 後端分離許可權控制設計和實現思路

前 後端分離許可權控制設計和實現思路 簡述近幾年隨著react angular vue等前端框架興起,前後端分離的架構迅速流行。但同時許可權控制也帶來了問題。網上很多前 後端分離許可權僅僅都僅僅在描述前端許可權控制 且是較簡單 固定的角色場景,滿足不了我們使用者 角色都是動態的場景。且僅僅前端進行許...