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

DEMO

測試地址

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

角色可以分配許可權

控制選單是否顯示,新增/刪除按鈕是否顯示

設計思路

核心

每個登入使用者擁有各自的N條許可權,比如 文章:檢視/編輯/釋出/刪除

後端

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

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

角色的作用其實只是用來管理分配許可權的,真正的驗證只驗證許可權

@RequiresPermissions("article:add")

而不是

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

前端

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

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

 "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.org
npm run dev

後端就是常規的shiro配置,前端程式碼如果看不明白,可以參考前端許可權程式碼說明

分配許可權頁面效果