推薦一款前後端分離的學習專案-基於springboot+vue

Java知音發表於2018-08-10
後端Spring BootVue

使用了什麼（學習這個專案可以學到什麼）

  1. springboot
  2. shiro許可權控制
  3. vue
  4. ElementUI

前端

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
複製程式碼
"userPermission":{  
         "menuList":[  
            "role",
            "user",
            "article"
         ],
         "roleId":1,
         "nickname":"超級使用者",
         "roleName":"管理員",
         "permissionList":[  
            "article:list",
            "article:add",
            "user:list",
         ],
         "userId":10003
      }複製程式碼

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

後端

基於 RBAC新解 .

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

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

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

1
複製程式碼
@RequiresPermissions("article:add")複製程式碼

而不是

1
複製程式碼
@RequiresRoles(value = {"admin","manager","writer"}, logical = Logical.OR)複製程式碼

資料庫

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

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

具體實現

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

1
2
複製程式碼
npm install --registry=https://registry.npm.taobao.org
npm run dev複製程式碼

分配許可權頁面效果

專案下載地址：github.com/Heeexy/Spri…

本文涉及到的知識點學習

Vue實戰教程：www.javazhiyin.com/category/vu…

springboot學習：www.javazhiyin.com/category/sp…



相關文章