基于前后端分離架構的用戶權限控制系統設計與實現

廖祥

摘 ?要：本文基于前后端分離的架構，設計了多用戶企業管理系統中用戶角色權限控制系統，實現了不同用戶基于角色的訪問控制。在本系統中前端框架主要使用了Vue.js，后端則使用了Spring Boot進行快速構建，同時使用了Spring Security作為整個系統的安全框架。根據企業管理系統的需求實現了角色權限管理功能，以及用戶的動態權限分配，同時兼顧了系統對可擴展性的需求。

關鍵詞：角色權限控制;前后端分離架構;企業管理系統

中圖分類號：TP311 ? ? 文獻標識碼：A

Abstract： This paper proposes a user permission control system based on structure of front and back end separation in multi-user enterprise management system. It helps to realize the role-based access control of different users. In this system， the front-end framework mainly uses Vue.js， and the back-end uses the Spring Boot for rapid construction. At the same time， Spring Security is used as the security framework of the entire system. According to the requirements of the enterprise management system， role authority management and users' dynamic permission are realized， and the system's demand for extensibility is also taken into account.

Keywords： role permission control; front and rear end separation; enterprise management system

1 ?引言（Introduction）

隨著互聯網應用架構的不斷演變，前后端分離的開發模式已經成為當前一種流行的趨勢[1]。后端不再控制頁面如何進行展示，只需要對外暴露接口即可，而頁面的渲染與展示全部由前端來完成，前端只需要調用后端服務的接口來提交和獲取相應的數據即可。雖然采用前后端分離的開發模式具有很多優勢，但是在頁面權限和后端接口權限的控制上也帶來了一些挑戰[2]。傳統模式下開發的Web系統前后端并不是獨立工作，在判斷某個用戶是否擁有某一權限的時候，大多采用基于Spring AOP提供的面向切面編程的技術[3]。而在前后端分離的情況下，后端只對外提供接口，前端并不能直接調用后端系統中其他業務邏輯代碼，只能通過調用接口獲取數據來進行權限的判斷，因此頁面所展現的內容應該在用戶登錄之后根據用戶的角色獲取相關的資源數據后進行渲染。

2 ? 系統技術概述（System technology overview）

由于采用的是前后端分離的架構，本文選擇了當前互聯網應用開發中比較流行的前后端框架：Vue.js和Spring Boot。數據庫采用MySql5.7，持久層框架選用MyBatis，并且使用Spring Security來控制用戶訪問資源的權限并保證后端接口的安全性。

2.1 ? Vue.js

Vue.js是一套用于構建用戶界面的漸進式JavaScript框架，它將整個頁面的內容都劃分成組件的形式，每個組件都擁有各自的CSS樣式和JavaScript代碼，并且能夠在其他組件中復用[4]。Vue.js除了能簡化開發，它還提供了路由守衛的功能，在路由跳轉的時候，可以進行一系列的邏輯判斷，便于頁面權限的控制。

2.2 ? Spring Boot

Spring框架的出現解決了傳統EJB開發繁重臃腫的問題，為J2EE提供了一套簡單實用的解決方案[5]。但是隨著互聯網應用功能越來越多，系統越來越復雜，大量的XML配置以及與第三方框架的整合工作讓開發者痛苦不已。為了解決這些煩瑣的配置和整合問題，Spring Boot應運而生，該框架采用了特定的方式進行自動配置，對于第三方框架的整合，也只需要導入相關依賴，使用少量的注解進行配置即可使用。

2.3 ? Spring Security

Spring Security基于Spring框架，為Web應用的安全提供了一套完整的解決方案[6]，該框架通過一系列不同功能的過濾器所組成的過濾器鏈來進行用戶身份的認證和，同時也在Spring Boot中進行了整合，使用的時候只需要在Maven項目中導入依賴即可。

3 ?系統關鍵功能的實現（The realization of key functions of the system）

3.1 ? 數據庫表的設計

本文數據庫表采用基于角色的訪問控制（RBAC）來設計，主要包括了：用戶表（hr）、用戶角色關聯表（hr_role）、角色表（role）、角色資源關聯表（role_menu）和資源表（menu）。表之間的對應關系如圖1所示。

其中用戶表和角色表的對應關系為一對多，表示一個用戶可以有多個角色;角色表與資源表的對應關系同樣為一對多，表示一個角色可以擁有多個資源的訪問權限，其中資源表的部分字段如表1所示。

（1）url字段表示后端接口的請求路徑，該字段主要用于后臺接口的權限校驗。例如“/employee/**”表示匹配員工管理功能模塊的所有請求，用戶在員工管理頁面進行操作時，向后端發送的請求都帶有“/employee”前綴。

（2）path字段表示前端路由路徑，該字段用于頁面權限的校驗。前端頁面的跳轉主要通過改變路由路徑來實現，而一個路由路徑對應一個組件，例如/emp/basic路徑表示跳轉到用戶基礎信息管理。

（3）component字段表示當前路由路徑下要加載的組件，在路由信息發生改變的時候，會通過path字段找到對應的組件，在頁面進行渲染。

（4）name字段表示左側菜單的名字，在用戶登錄成功之后，將會獲取用戶能夠訪問的資源，即菜單列表進行渲染，同時路由跳轉也是通過點擊菜單來實現。

3.2 ? 前端功能實現

管理系統主要分為登錄頁和主頁兩個頁面，用戶登錄成功之后就跳轉到主頁。在進入主頁之前調用后端接口獲取用戶角色所對應的資源，即左側菜單列表，然后通過點擊左側菜單列表進行路由跳轉，加載不同的功能頁面，完成相關業務操作。

現在考慮另一種情況，某個用戶登錄之后記下了主頁的地址，或者記下了一個自己沒有權限訪問的路由路徑，然后在地址欄手動輸入之后進行訪問，此時系統就會出現安全隱患。因為是前后端分離的項目，前端路由變化引起的頁面跳轉后端并不知道，所以除了后端需要傳遞給前端特定角色的資源數據以外，前端同樣需要做頁面權限的校驗。解決此問題的辦法就是使用Vue.js的路由組件提供的路由守衛來進行邏輯判斷，常用的路由守衛如表2所示。

路由鉤子函數參數說明：

（1）to：即將要進入的目標路由對象。

（2）from：當前導航正要離開的路由。

（3）next：調用該方法來進行邏輯判斷。直接執行next（）正常跳轉到to指定的路由路徑;如果執行next（）返回了false，則中斷當前跳轉，回到from指定的路由路徑;另外在next方法中還可以執行特定的路由跳轉，如直接調用next（/loginPage）表示跳轉到登錄頁。

本系統中使用了全局前置守衛，在頁面發生跳轉的時候通過在next方法中調用后端接口，來判斷當前用戶是否有權訪問to所指定的頁面，整個控制流程如圖2所示。

3.3 ? 后端功能實現

使用Spring Boot腳手架快速搭建好項目，完成基礎數據庫表數據的增刪改查后，在Maven項目的pom文件中導入Spring Security的依賴：

org.springframework.boot

spring-boot-starter-security

導入依賴后，關鍵功能的實現過程主要分為如下幾個步驟：

（1）用戶類Hr實現UserDetails接口。UserDetails接口是Spring Security提供的一個與用戶信息密切相關的接口，后臺管理系統中的用戶實體類實現了該接口并重寫其接口方法之后，Spring Security框架就能夠獲取業務系統中的用戶信息，并基于此信息來完成認證與授權。

（2）用戶業務類HrService實現UserDetailsService接口。該接口只提供了loadUserByUsername一個方法，在重寫該方法后通過用戶名查詢用戶表返回用戶數據對象即可。

（3）自定義FilterInvocationSecurityMetadataSource接口實現類。該實現類作為一個資源管理器，主要目的就是根據前端請求的路徑，查詢哪些角色擁有該資源的訪問權限，這些信息將從角色資源表及其關聯表中查詢得到。

（4）自定義AccessDecisionManager接口實現類。該實現類作為決策管理器，接口方法的功能主要是從用戶成功登錄時保存的用戶信息中獲取到用戶角色，然后判斷當前用戶的角色是否在資源管理器所查詢出角色集合中，如果角色集合中包含當前用戶的角色，則表示當前用戶有權訪問。

（5）在完成上面的工作之后，還需要對Spring Security框架進行配置。Spring Security提供了WebSecurityConfigurerAdapter接口，實現該接口之后配置后端哪些接口需要進行攔截和權限校驗，并且指定校驗成功和失敗的處理器。完成上面的配置之后，后端接口的權限校驗功能就已經實現了，整個校驗流程如圖3所示。

3.4 ? 系統功能測試

首先使用PostMan接口調試工具測試后臺接口的權限，在未登錄的情況，直接調用其他接口獲取數據均不成功，返回了未登錄的提示信息，登錄之后成功訪問。在訪問沒有權限的接口時，請求被攔截，返回未授權提示信息。通過系統管理員添加測試用戶并分配相應的角色，登錄進入主頁之后只看到了當前角色能夠訪問的菜單列表，手動輸入其他路由路徑顯示未授權的提示信息。

4 ? 結論（Conclusion）

本文基于當前流行的前后端分離架構，設計實現了在此架構下用戶角色權限控制系統，從對后端接口的測試以及前后端聯調的運行結果來看，此系統能夠成功地控制頁面權限與后臺接口權限，可以滿足企業級后臺管理系統的需要。如果后期系統在進行功能擴展時前端加入了新的頁面，運維人員只需要在數據庫資源表添加新增頁面相關數據即可，后端權限相關代碼可以做到零修改，因此該系統在做到安全、高效的前提下同時也兼顧了整個系統的可擴展性。

參考文獻（References）

[1] 王建，羅政，張希，等.Web項目前后端分離的設計與實現[J].軟件工程，2020，23（04）：22-24.

[2] 遲殿委.前后端分離的Web架構解決方案[J].智慧工廠，2019（06）：37-38.

[3] 宋清卿.前后端分離Web系統下一種訪問控制方法的設計與實現[J].計算機代，2020（05）：23-26.

[4] 劉金羽.基于Vue.js的前端教學軟件設計與實現[J].電腦編程技巧與維護，2020（02）：23-24;29.

[5] Zhang M， Lv J， Jiang Y， et al. Intelligent business cloud service platform based on SpringBoot framework[C]. 2020 Asia-Pacific Conference on Image Processing， Electronics and Computers （IPEC）. IEEE， 2020：201-207.

[6] 孫云杰，段祎林，田盼棟，等.基于SSM+Spring Security的多角色登錄功能后臺實現[J].電子技術與軟件工程，2020（05）：16-18.

作者簡介：

廖 ?祥（1994-），男，碩士生.研究領域：網絡化控制系統，軟件系統開發.