大夥再搞權限系統的時候，權限控制到菜單很容易，但是很多情況要控制到按鈕接口級別，這個時候設計就要研究下了。方案好幾種，鋒哥這裏推薦一個不錯的開源方案，大夥可以參考學習下。Spring Boot-Shiro-Vue實現；
github開源地址：
https://github.com/Heeexy/SpringBoot-Shiro-Vue
系統演示地址：
http://g.heeexy.com/
Spring Boot-Shiro-Vue
提供一套基於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配置,前端代碼如果看不明白,可以參考前端權限代碼說明
