基于前后端分離架構(gòu)的用戶權(quán)限控制系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

廖祥

摘 ?要：本文基于前后端分離的架構(gòu)，設(shè)計(jì)了多用戶企業(yè)管理系統(tǒng)中用戶角色權(quán)限控制系統(tǒng)，實(shí)現(xiàn)了不同用戶基于角色的訪問(wèn)控制。在本系統(tǒng)中前端框架主要使用了Vue.js，后端則使用了Spring Boot進(jìn)行快速構(gòu)建，同時(shí)使用了Spring Security作為整個(gè)系統(tǒng)的安全框架。根據(jù)企業(yè)管理系統(tǒng)的需求實(shí)現(xiàn)了角色權(quán)限管理功能，以及用戶的動(dòng)態(tài)權(quán)限分配，同時(shí)兼顧了系統(tǒng)對(duì)可擴(kuò)展性的需求。

關(guān)鍵詞：角色權(quán)限控制;前后端分離架構(gòu);企業(yè)管理系統(tǒng)

中圖分類號(hào)：TP311 ? ? 文獻(xiàn)標(biāo)識(shí)碼：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）

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

2 ? 系統(tǒng)技術(shù)概述（System technology overview）

由于采用的是前后端分離的架構(gòu)，本文選擇了當(dāng)前互聯(lián)網(wǎng)應(yīng)用開(kāi)發(fā)中比較流行的前后端框架：Vue.js和Spring Boot。數(shù)據(jù)庫(kù)采用MySql5.7，持久層框架選用MyBatis，并且使用Spring Security來(lái)控制用戶訪問(wèn)資源的權(quán)限并保證后端接口的安全性。

2.1 ? Vue.js

Vue.js是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，它將整個(gè)頁(yè)面的內(nèi)容都劃分成組件的形式，每個(gè)組件都擁有各自的CSS樣式和JavaScript代碼，并且能夠在其他組件中復(fù)用[4]。Vue.js除了能簡(jiǎn)化開(kāi)發(fā)，它還提供了路由守衛(wèi)的功能，在路由跳轉(zhuǎn)的時(shí)候，可以進(jìn)行一系列的邏輯判斷，便于頁(yè)面權(quán)限的控制。

2.2 ? Spring Boot

Spring框架的出現(xiàn)解決了傳統(tǒng)EJB開(kāi)發(fā)繁重臃腫的問(wèn)題，為J2EE提供了一套簡(jiǎn)單實(shí)用的解決方案[5]。但是隨著互聯(lián)網(wǎng)應(yīng)用功能越來(lái)越多，系統(tǒng)越來(lái)越復(fù)雜，大量的XML配置以及與第三方框架的整合工作讓開(kāi)發(fā)者痛苦不已。為了解決這些煩瑣的配置和整合問(wèn)題，Spring Boot應(yīng)運(yùn)而生，該框架采用了特定的方式進(jìn)行自動(dòng)配置，對(duì)于第三方框架的整合，也只需要導(dǎo)入相關(guān)依賴，使用少量的注解進(jìn)行配置即可使用。

2.3 ? Spring Security

Spring Security基于Spring框架，為Web應(yīng)用的安全提供了一套完整的解決方案[6]，該框架通過(guò)一系列不同功能的過(guò)濾器所組成的過(guò)濾器鏈來(lái)進(jìn)行用戶身份的認(rèn)證和，同時(shí)也在Spring Boot中進(jìn)行了整合，使用的時(shí)候只需要在Maven項(xiàng)目中導(dǎo)入依賴即可。

3 ?系統(tǒng)關(guān)鍵功能的實(shí)現(xiàn)（The realization of key functions of the system）

3.1 ? 數(shù)據(jù)庫(kù)表的設(shè)計(jì)

本文數(shù)據(jù)庫(kù)表采用基于角色的訪問(wèn)控制（RBAC）來(lái)設(shè)計(jì)，主要包括了：用戶表（hr）、用戶角色關(guān)聯(lián)表（hr_role）、角色表（role）、角色資源關(guān)聯(lián)表（role_menu）和資源表（menu）。表之間的對(duì)應(yīng)關(guān)系如圖1所示。

其中用戶表和角色表的對(duì)應(yīng)關(guān)系為一對(duì)多，表示一個(gè)用戶可以有多個(gè)角色;角色表與資源表的對(duì)應(yīng)關(guān)系同樣為一對(duì)多，表示一個(gè)角色可以擁有多個(gè)資源的訪問(wèn)權(quán)限，其中資源表的部分字段如表1所示。

（1）url字段表示后端接口的請(qǐng)求路徑，該字段主要用于后臺(tái)接口的權(quán)限校驗(yàn)。例如“/employee/**”表示匹配員工管理功能模塊的所有請(qǐng)求，用戶在員工管理頁(yè)面進(jìn)行操作時(shí)，向后端發(fā)送的請(qǐng)求都帶有“/employee”前綴。

（2）path字段表示前端路由路徑，該字段用于頁(yè)面權(quán)限的校驗(yàn)。前端頁(yè)面的跳轉(zhuǎn)主要通過(guò)改變路由路徑來(lái)實(shí)現(xiàn)，而一個(gè)路由路徑對(duì)應(yīng)一個(gè)組件，例如/emp/basic路徑表示跳轉(zhuǎn)到用戶基礎(chǔ)信息管理。

（3）component字段表示當(dāng)前路由路徑下要加載的組件，在路由信息發(fā)生改變的時(shí)候，會(huì)通過(guò)path字段找到對(duì)應(yīng)的組件，在頁(yè)面進(jìn)行渲染。

（4）name字段表示左側(cè)菜單的名字，在用戶登錄成功之后，將會(huì)獲取用戶能夠訪問(wèn)的資源，即菜單列表進(jìn)行渲染，同時(shí)路由跳轉(zhuǎn)也是通過(guò)點(diǎn)擊菜單來(lái)實(shí)現(xiàn)。

3.2 ? 前端功能實(shí)現(xiàn)

管理系統(tǒng)主要分為登錄頁(yè)和主頁(yè)兩個(gè)頁(yè)面，用戶登錄成功之后就跳轉(zhuǎn)到主頁(yè)。在進(jìn)入主頁(yè)之前調(diào)用后端接口獲取用戶角色所對(duì)應(yīng)的資源，即左側(cè)菜單列表，然后通過(guò)點(diǎn)擊左側(cè)菜單列表進(jìn)行路由跳轉(zhuǎn)，加載不同的功能頁(yè)面，完成相關(guān)業(yè)務(wù)操作。

現(xiàn)在考慮另一種情況，某個(gè)用戶登錄之后記下了主頁(yè)的地址，或者記下了一個(gè)自己沒(méi)有權(quán)限訪問(wèn)的路由路徑，然后在地址欄手動(dòng)輸入之后進(jìn)行訪問(wèn)，此時(shí)系統(tǒng)就會(huì)出現(xiàn)安全隱患。因?yàn)槭乔昂蠖朔蛛x的項(xiàng)目，前端路由變化引起的頁(yè)面跳轉(zhuǎn)后端并不知道，所以除了后端需要傳遞給前端特定角色的資源數(shù)據(jù)以外，前端同樣需要做頁(yè)面權(quán)限的校驗(yàn)。解決此問(wèn)題的辦法就是使用Vue.js的路由組件提供的路由守衛(wèi)來(lái)進(jìn)行邏輯判斷，常用的路由守衛(wèi)如表2所示。

路由鉤子函數(shù)參數(shù)說(shuō)明：

（1）to：即將要進(jìn)入的目標(biāo)路由對(duì)象。

（2）from：當(dāng)前導(dǎo)航正要離開(kāi)的路由。

（3）next：調(diào)用該方法來(lái)進(jìn)行邏輯判斷。直接執(zhí)行next（）正常跳轉(zhuǎn)到to指定的路由路徑;如果執(zhí)行next（）返回了false，則中斷當(dāng)前跳轉(zhuǎn)，回到from指定的路由路徑;另外在next方法中還可以執(zhí)行特定的路由跳轉(zhuǎn)，如直接調(diào)用next（/loginPage）表示跳轉(zhuǎn)到登錄頁(yè)。

本系統(tǒng)中使用了全局前置守衛(wèi)，在頁(yè)面發(fā)生跳轉(zhuǎn)的時(shí)候通過(guò)在next方法中調(diào)用后端接口，來(lái)判斷當(dāng)前用戶是否有權(quán)訪問(wèn)to所指定的頁(yè)面，整個(gè)控制流程如圖2所示。

3.3 ? 后端功能實(shí)現(xiàn)

使用Spring Boot腳手架快速搭建好項(xiàng)目，完成基礎(chǔ)數(shù)據(jù)庫(kù)表數(shù)據(jù)的增刪改查后，在Maven項(xiàng)目的pom文件中導(dǎo)入Spring Security的依賴：

org.springframework.boot

spring-boot-starter-security

導(dǎo)入依賴后，關(guān)鍵功能的實(shí)現(xiàn)過(guò)程主要分為如下幾個(gè)步驟：

（1）用戶類Hr實(shí)現(xiàn)UserDetails接口。UserDetails接口是Spring Security提供的一個(gè)與用戶信息密切相關(guān)的接口，后臺(tái)管理系統(tǒng)中的用戶實(shí)體類實(shí)現(xiàn)了該接口并重寫(xiě)其接口方法之后，Spring Security框架就能夠獲取業(yè)務(wù)系統(tǒng)中的用戶信息，并基于此信息來(lái)完成認(rèn)證與授權(quán)。

（2）用戶業(yè)務(wù)類HrService實(shí)現(xiàn)UserDetailsService接口。該接口只提供了loadUserByUsername一個(gè)方法，在重寫(xiě)該方法后通過(guò)用戶名查詢用戶表返回用戶數(shù)據(jù)對(duì)象即可。

（3）自定義FilterInvocationSecurityMetadataSource接口實(shí)現(xiàn)類。該實(shí)現(xiàn)類作為一個(gè)資源管理器，主要目的就是根據(jù)前端請(qǐng)求的路徑，查詢哪些角色擁有該資源的訪問(wèn)權(quán)限，這些信息將從角色資源表及其關(guān)聯(lián)表中查詢得到。

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

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

3.4 ? 系統(tǒng)功能測(cè)試

首先使用PostMan接口調(diào)試工具測(cè)試后臺(tái)接口的權(quán)限，在未登錄的情況，直接調(diào)用其他接口獲取數(shù)據(jù)均不成功，返回了未登錄的提示信息，登錄之后成功訪問(wèn)。在訪問(wèn)沒(méi)有權(quán)限的接口時(shí)，請(qǐng)求被攔截，返回未授權(quán)提示信息。通過(guò)系統(tǒng)管理員添加測(cè)試用戶并分配相應(yīng)的角色，登錄進(jìn)入主頁(yè)之后只看到了當(dāng)前角色能夠訪問(wèn)的菜單列表，手動(dòng)輸入其他路由路徑顯示未授權(quán)的提示信息。

4 ? 結(jié)論（Conclusion）

本文基于當(dāng)前流行的前后端分離架構(gòu)，設(shè)計(jì)實(shí)現(xiàn)了在此架構(gòu)下用戶角色權(quán)限控制系統(tǒng)，從對(duì)后端接口的測(cè)試以及前后端聯(lián)調(diào)的運(yùn)行結(jié)果來(lái)看，此系統(tǒng)能夠成功地控制頁(yè)面權(quán)限與后臺(tái)接口權(quán)限，可以滿足企業(yè)級(jí)后臺(tái)管理系統(tǒng)的需要。如果后期系統(tǒng)在進(jìn)行功能擴(kuò)展時(shí)前端加入了新的頁(yè)面，運(yùn)維人員只需要在數(shù)據(jù)庫(kù)資源表添加新增頁(yè)面相關(guān)數(shù)據(jù)即可，后端權(quán)限相關(guān)代碼可以做到零修改，因此該系統(tǒng)在做到安全、高效的前提下同時(shí)也兼顧了整個(gè)系統(tǒng)的可擴(kuò)展性。

參考文獻(xiàn)（References）

[1] 王建，羅政，張希，等.Web項(xiàng)目前后端分離的設(shè)計(jì)與實(shí)現(xiàn)[J].軟件工程，2020，23（04）：22-24.

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

[3] 宋清卿.前后端分離Web系統(tǒng)下一種訪問(wèn)控制方法的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)代，2020（05）：23-26.

[4] 劉金羽.基于Vue.js的前端教學(xué)軟件設(shè)計(jì)與實(shí)現(xiàn)[J].電腦編程技巧與維護(hù)，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的多角色登錄功能后臺(tái)實(shí)現(xiàn)[J].電子技術(shù)與軟件工程，2020（05）：16-18.

作者簡(jiǎn)介：

廖 ?祥（1994-），男，碩士生.研究領(lǐng)域：網(wǎng)絡(luò)化控制系統(tǒng)，軟件系統(tǒng)開(kāi)發(fā).