Spring Cloud實戰 | 第十一篇：基於Spring Cloud Gateway + vue-element-admin 實現的RBAC權限管理系統，實現網關對RESTful接口權限和自定義Vue指令對按鈕權限的細粒度控制

2021 年 2 月 10 日
筆記
Spring Cloud, VUE

一. 前言

信我的哈，明天過年。

這應該是農曆年前的關於開源項目的最後一篇文章了。

有來商城是基於 Spring Cloud OAuth2 + Spring Cloud Gateway + JWT實現的統一認證鑒權，Spring Cloud & Alibaba + vue-element-admin實現的微服務、前後端分離的全棧開源項目。

有來系統的權限設計主要是為了實現以下幾點目標：

實現RBAC模式的權限管理設計
實現基於 vue-element-admin 後台菜單權限管理系統
Spring Cloud Gateway 網關針對RESTful接口權限控制
Vue 自定義指令實現按鈕級別權限控制

二. 項目介紹

1. 項目簡介

有來商城是基於Spring Boot 2.4、Spring Cloud 2020 & Alibaba、Vue、element-ui、uni-app快速構建的一套全棧開源商城平台，包括微服務應用、管理平台、微信小程序及APP應用。

2. 項目地址

管理平台訪問地址: //www.youlai.store

【有來小店】微信小程序體驗碼，掃描後申請體驗即可

源碼地址：

項目名稱	Github	碼雲
微服務後台	youlai-mall	youlai-mall
管理前端	youlai-mall-admin	youlai-mall-admin
微信小程序	youlai-mall-weapp	youlai-mall-weapp
APP應用	youlai-mall-app	youlai-mall-app

3. 項目往期文章

後台微服務

後台管理前端

微信小程序

vue+uni-app商城實戰 | 第一篇：從0到1快速開發一個商城微信小程序，無縫接入Spring Cloud OAuth2認證授權登錄

應用部署

三. 數據庫設計

RBAC(Role-Based Access Control)基於角色訪問控制，目前使用最為廣泛的權限模型。

此模型有三個角色用戶、角色、權限，在傳統的權限模型用戶直接關聯加了角色層，解耦了用戶和權限，使得權限系統有了更清晰的職責劃分和更高的靈活度。

以下是有來系統關於RBAC權限模型的數據庫

重點說權限，系統權限分3類，如下表:

權限名稱	表名	字段	權限標識
菜單權限	sys_menu
接口權限	sys_permission	type=1	PUT_/users/**
按鈕權限	sys_permission	type=2	system:user:add

其實了解過目前主流開源系統的權限設計，大概率的把菜單和按鈕放一塊然後根據類別字段區分，以下就關於這種方式優劣發表下個人意見，僅供大家參考下不必較真：

優勢：

合理，按鈕肯定屬於某個菜單之下
省去了權限表(sys_permission)和關聯中間表這兩張表

劣勢：

菜單模塊變的複雜了，菜單表多了和菜單無關聯的類型字段和權限標識字段
菜單和按鈕查詢要區分類型，給代碼開發帶來複雜和影響查詢性能
不能同時滿足按鈕權限控制和網關根據請求路徑Ant匹配鑒權（具體下文說）

四. 權限系統管理界面

先看下vue-element-admin下的RBAC模型下的後台權限管理界面，體驗地址：//www.youlai.store

菜單權限管理

角色分配權限

五. RESTful接口權限控制

1. 理論篇

上文說到的關於權限表的拆分，菜單單獨一張表，按鈕權限和接口權限合為一張表根據類型type字段區分，之所以這樣因為接口和按鈕權限有些共性，都有一個權限標識字段。

至於按鈕和接口為什麼要區分呢？都使用system:user:add權限標識不可以嗎？

具體做法是接口方法加上Spring Security的註解@PreAuthorize(“hasPermission(‘system:user:add’)”),在執行方法前判斷用戶時候擁有該權限。

答案是一般場景這樣設計絕對沒問題。但這裡使用網關作為統一鑒權的入口，肯定希望網關一次性把鑒權的活做的乾脆利落，這樣就不需要在各個微服務單獨的把Spring Security權限模塊引入鑒權，通過網關鑒權能把職責分工明確，減少開發工作量，無權限的請求直接被網關攔截返回，不會走到微服務那裡再被告知無權訪問，提高請求效率。

Spring Cloud Gateway網關使用請求路徑Ant匹配請求標識進行權限判斷的，例如/users/1經過Ant匹配到權限標識/users/**,而/users/**是被用戶所持有的權限標識，這就標識用戶允許訪問/users/1的請求，所以和按鈕的權限標識system:user:add是有區別的。

這樣就完事了嗎？當然還沒，因為有來系統較於其他系統它是比較嚴格遵守REST接口設計規範，所以如果僅僅是上面根據請求路徑URL判斷權限肯定是不合理的，/users/1這個請求路徑在RESTful接口下可能是GET類型的請求也有可能是PUT類型的請求,那該如何處理？

所以在sys_permission表裡還有一個method字段來標識請求方法類型,值可能會是、GET、POST、PUT、PATCH、DELETE等HTTP請求方法類型，其中是不限請求方法類型的意思，然後將請求方法類型和請求路徑組合得到接口的權限標識是這樣的PUT_users/1。

接下來就通過對有來系統的實戰操作來演示網關如何細粒度對RESTful接口的權限控制。

2. 實戰篇

2.1 添加權限

新增用戶管理的增刪改查權限

2.2 角色授權

賦予系統管理員(admin)用戶查詢權限，無其他權限

2.3 加載角色權限規則至緩存

項目啟動查看Redis中的角色權限規則：

看到系統管理員這個角色是沒有用戶修改權限的。你可以給角色添加用戶修改權限後嘗試是否可以修改成功。

2.4 演示

admin系統管理員登錄執行一個用戶修改的提交的請求，看一下網關鑒權的流程：

結果可想而知，系統管理員不具有修改用戶PUT_/youlai-admin/v1/users/2權限，從緩存查詢只有超級管理員具有該接口請求方法訪問權限。頁面結果顯示如下：

六. 按鈕權限控制

1. 理論篇

Vue除了核心功能默認內置的指令 (v-model 和 v-show)，Vue 也允許註冊自定義指令。

這裡主要使用Vue.directive註冊一個全局自定義指令v-has- permission用於權限判斷,然後在模板中的任何元素使用v-has- permission屬性。

自定義指令學習傳送門

2. 實戰篇

1. 添加按鈕權限

2. 角色授權

3. 加載角色按鈕權限數據

完整代碼：youlai-mall-admin

登錄成功時獲取用戶信息，其中包含該用戶擁有的權限字符串如下：

這裡將用戶權限擁有的字符串集合緩存到vuex的perms屬性中：

4. 自定義和註冊全局指令

有來管理前端是基於vue-element-admin後台前端解決方案，在
vue-element-admin項目我們可以看到自定義指令的應用。如下：

然後複製一份permission.js重命名為hasPermission.js,修改後如下：

註冊全局指令：

指令在組件上的應用：

5. 演示

系統管理員是沒有修改按鈕的權限的，結果如下頁面不顯示修改按鈕。

那給系統管理員添加修改按鈕的權限

再看看用戶頁面的顯示情況

此時用戶頁面的修改按鈕已經顯示出來了，至此完成了系統的按鈕權限控制。

七. 結語

本篇通過實戰的方式講述如何基於Spring Cloud Gateway + vue-element-admin技術設計一套符合RBAC規範的權限管理系統，通過網關就可以輕易實現RESTful接口方法細粒度的控制，無需將Spring Security模塊引入各個微服務；以及使用Vue的自定義指令在組件中使用實現細粒度的按鈕權限控制。

如果你對此系統權限設計有更好的建議，歡迎留言給我，在此感謝！

如果對項目感興趣的話，歡迎加我微信和項目交流群。

最後預祝大家新年愉快，新的一年能夠「牛」轉乾坤。

Tags: Spring Cloud VUE

Spring Cloud實戰 | 第十一篇：基於Spring Cloud Gateway + vue-element-admin 實現的RBAC權限管理系統，實現網關對RESTful接口權限和自定義Vue指令對按鈕權限的細粒度控制

一. 前言