提供一套基於SpringBoot-shiro-vue的許可權管理思路.

前後端都加以控制,做到按鈕/介面層級的許可權 DEMO

測試地址

admin/123456 管理員身份登入,可以新增使用者,角色.

角色可以分配許可權

控制功能表是否顯示,新增/刪除按鈕是否顯示 設計思路 核心

每個登入使用者擁有各自的N條許可權,比如 文章:查看/編輯/發布/刪除

後端

基於 RBAC新解 .

通常我們的許可權設計都是 使用者--角色--許可權 ,其中角色是我們寫代碼的人沒法控制的,它可以有多條許可權,每個使用者又可以設計為擁有多個角色.因此如果從角色著手進行許可權驗證,系統都必鬚根據使用者的配置動起來,非常複雜.

所以我們後台設計的關鍵點就在於: 後台介面只驗證許可權,不看角色.

角色的作用其實只是用來管理分配許可權的,真正的驗證只驗證許可權 ,而不去管你是否是那種角色.體現在代碼上就是介面上註解為

@RequiresPermissions("article:add")

而不是

@RequiresRoles(value = {"admin","manager","writer"}, logical = Logical.OR) 

前端

採用了vueAdmin-template , ElementUI , 許可權設計思路也是參考了vueAdmin的動態路由的設計.

後端負責了介面的安全性,而前端之所以要做許可權處理,最主要的目的就是隱藏掉不具有許可權的菜單(路由)和按鈕.

登入系統後,後端返回此使用者的許可權資訊,比如

 "userPermission":{           "menuList":[              "role",            "user",            "article"         ],         "roleId":1,         "nickname":"超級使用者",         "roleName":"管理員",         "permissionList":[              "article:list",            "article:add",            "user:list",         ],         "userId":10003      }

根據menuList判斷給此使用者產生哪些路由, 根據permissionList判斷給使用者顯示哪些按鈕,能請求哪些介面. 資料庫

最主要的是要有一張本系統內的全部許可權明細表,比如下面這樣  

如果某使用者擁有表格中前五條許可權,就可以查出他就擁有article和user兩個菜單,至於頁面內是否顯示(新增)(修改)按鈕,就根據他的permissionList來判斷. 具體實現

有了思路,就可以根據各自的業務進行實現,本項目在此進行了簡單的實現,後端代碼在back檔案夾,前端代碼在vue檔案夾.前端啟動只需

npm install --registry=https://registry.npm.taobao.orgnpm run dev

後端就是常規的shiro配置,前端代碼如果看不明白,可以參考前端許可權代碼說明 分配許可權頁面效果