管理系統的前端許可權控制

2021-08-15 07:11:29 字數 1246 閱讀 5999

問題:專案使用的是shiro框架處理使用者登入許可權,那麼前端要如何配合後端完成系統的許可權控制?

前端許可權比較常見的就是rbac基於角色的訪問控制,基本思想是系統的操作許可權不是直接授予具體的使用者,而是在使用者與許可權之間,建立角色集合,每個角色對應一組相應的許可權,一旦使用者被賦予某種角色,那麼使用者便具有了此角色對應的操作許可權。

這樣做的好處在於不必每次建立使用者都去分配許可權集,只要分配使用者對應的角色,相比於使用者許可權的變更角色的許可權變更要少得多,這樣可以簡化使用者許可權管理的系統開銷。

在angularjs構建的單頁面應用中,要配合後台shiro框架,完成系統許可權控制,整體來講主要需要處理3處:

1,ui處理;根據使用者擁有的許可權,判斷頁面上的內容是否應該顯示

2,路由處理;不允許使用者通過url訪問沒有許可權訪問的介面

3,http請求處理;當我們傳送乙個資料請求,如果返回的satuts是40x,則通常重定向到乙個錯誤提示頁面

前端要想實現以上許可權控制,首先需要在應用初始化階段,建立乙個優先執行的service,在service內通過傳送乙個同步的ajax請求(同步操作避免後面載入出現問題),將後台shiro框架處理過的使用者物件請求回來,這個物件中包括使用者的角色陣列roles,我們可以通過_.includes(roles,?)來判斷使用者具有的角色(?代表與後台事先溝通好的角色值,例如1代表管理員,2代表普通使用者),然後在服務內建立角色判斷函式便於其他模組呼叫,我們將這個service作為全變數使用,其他模組可以通過依賴注入的方式獲取service內部角色判斷函式(當然也可以通過$boradcast事件廣播處理,這裡我們未使用這種方法);

ui元件處理,依據判斷出的使用者許可權進行顯隱,這裡我們仿造ng-if原始碼,編寫指令用於處理ui元件的顯隱(當然我們可以直接在ui上使用ng-if,然後ui對應的controller,通過依賴注入判斷登陸使用者的角色,但這種方法不易復用,不推薦);

路由處理,我們這邊是將所有模組路由抽象成常量,然後在模組的路由常量內加入角色屬性,然後通過遍歷常量判斷可以訪問此模組的角色,以此來區分頁面是否有許可權跳轉,當使用者通過輸入url進行訪問頁面時,由於不具備許可權,頁面將停留在當前介面。

http處理,我們這邊已經通過在ui頁面控制了訪問入口不同許可權的顯隱,也通過路由限制了輸入url訪問頁面,所以http這塊未做特殊處理。

後台管理系統的許可權控制 前端許可權管理

1.1 什麼是許可權管理 許可權管理是乙個幾乎所有後台系統的都會涉及的乙個重要組成部分,主要目的是對整個後台管理系統進行許可權的控制,而針對的物件是員工,避免因許可權控制缺失或操作不當引發的風險問題,如操作錯誤,資料洩露等問題。1.2 許可權分類 後端許可權管理 許可權管理的核心在於服務其中的資料變...

Vue後台管理系統的按鈕許可權控制

摘要 最近需要在原有的後台管理系統中,需要給頁面中的所有按鈕進行許可權控制 實現的思路如下 方法一 1 獲取後台傳過來的按鈕許可權陣列,並將其儲存下來 2 寫乙個全域性的方法。判斷某個按鈕的許可權是否含在後台傳的按鈕許可權陣列中 3 頁面中在按鈕上寫v if進行控制 如下 後台的按鈕許可權資料模擬 ...

SPA前端許可權控制方案

這裡我們需要用到 vue 前端mvvm框架 vuex 狀態管理機 vue router 路由 axios http請求庫。1 登陸事件login 1.觸發登陸事件 dispatch login actions commit types.login success,res.data.data 2 獲取...