推薦一款先後端分離的學習項目-基於springboot+vue

時間 2019-11-24

標籤推薦一款後端分離學習項目基於 springboot+vue springboot vue 欄目 Spring 简体版

原文原文鏈接

使用了什麼（學習這個項目能夠學到什麼）php

springboot

shiro權限控制

vue

ElementUI

前端

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

後端負責了接口的安全性,而前端之因此要作權限處理,最主要的目的就是隱藏掉不具備權限的菜單(路由)和按鈕.前端

登陸系統後,後端返回此用戶的權限信息,好比vue

"userPermission":{  
         "menuList":[  
            "role",
            "user",
            "article"
         ],
         "roleId":1,
         "nickname":"超級用戶",
         "roleName":"管理員",
         "permissionList":[  
            "article:list",
            "article:add",
            "user:list",
         ],
         "userId":10003
      }複製代碼

根據menuList判斷給此用戶生成哪些路由, 根據permissionList判斷給用戶顯示哪些按鈕,能請求哪些接口.java

後端

基於 RBAC新解 .git

一般咱們的權限設計都是用戶--角色--權限 ,其中角色是咱們寫代碼的人無法控制的,它能夠有多條權限,每一個用戶又能夠設計爲擁有多個角色.所以若是從角色着手進行權限驗證,系統都必須根據用戶的配置動起來,很是複雜.github

因此咱們後臺設計的關鍵點就在於: 後臺接口只驗證權限,不看角色.spring

角色的做用其實只是用來管理分配權限的,真正的驗證只驗證權限 ,而不去管你是不是那種角色.體如今代碼上就是接口上註解爲數據庫

1
複製代碼

@RequiresPermissions("article:add")複製代碼

而不是npm

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…

相關標籤/搜索