淺談前后端分離技術在權限管理系統中的應用

盧彥曉

摘要：在各種基于Web技術的應用系統中，基于系統安全性的需求，都需要對用戶在系統中的權限進行管理，隨著Web前后端開發技術的發展與應用，基于前后端分離的架構得到了深入和廣泛的應用，逐漸成為Web開發的標準。該文在對前端框架Vue.js、后端SpringBoot框架、Apache Shiro安全框架技術進行分析的基礎之上，基于RBAC的權限設計理念，對前后端分離在權限管理系統中的應用進行分析，為權限管理系統的設計提供了一個思路。

關鍵詞：前后端分離架構;Vue.js;權限管理系統;基于角色的訪問控制;Apache Shiro安全框架

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

文章編號：1009-3044（2021）34-0068-02

隨著互聯網技術的飛速發展和應用的深入，B/S開發模式在基于Web的應用中逐漸成為主流的開發模式。雖然B/S開發模式得到了廣泛的應用，但它也存在著諸多的缺點，例如前后端代碼的耦合度高，網站流量較大時，服務器的壓力較大，以及網站響應速度慢等。

另一方面，隨著互聯網應用的深入，網站流量的增加，業務需求的改變，項目勢必需要進行升級擴展和結構優化。但傳統的開發模式，雖然引入了MVC思想，使代碼得到了一定的解耦合，但仍然有大量的前后端代碼耦合在一起，需要開發人員必須同時學習前后端技術，給開發人員帶來了極大的學習壓力和成本，同時造成代碼的可讀性和可維護性較差，給后期項目的擴展和維護增加了難度。

因此，伴隨著前端技術的發展，在Web開發中引入前后端分離的開發模式是必然的趨勢，前端與后端分離后，不僅降低了前端開發人員學習新知識的成本，同時提高了開發的效率，縮短了項目開發周期，提高了項目的可維護和可擴展性。

1 前后端分離技術概述

傳統的Web開發，開發人員不僅要負責后端，還要負責前端，開發人員不能同時進行，項目開發的效率較低。而在前后端分離的開發模式中，開發人員各司其職，前端開發人員只需要關注于前端頁面的呈現、樣式、行為，通過調用后端的API實現數據的渲染;后端人員則只需要關注于數據訪問和業務邏輯，根據項目前端需求提供相應的API接口供前端調用即可。前后端分離實現了Web開發的高度解耦，開發人員分工明確、職責分明，前后端只通過API進行交互。

1.1 前端Vue.js

Vue.js是目前應用較多的前端開發框架，它被設計為自底向上逐層應用，是一套用于快速構建前端用戶界面的漸進式框架，它只關注視圖層，并且易于學習。它將整個頁面的內容分解為若干個組件，每一個組件都有自己的JavaScript代碼和CSS樣式，利用組件來構建頁面內容，同時，組件還可以實現復用。另一方面，Vue.js提供了強大的前端路由功能，利用其路由守衛的功能，在前端進行路由跳轉的時候，對路由進行一系列的邏輯判斷，實現對頁面組件權限的控制功能。

1.2 后端SpringBoot開發框架

在Web開中，Spring的出現解決了傳統EJB開發繁重的問題，為基于Java的Web開發提供了一套簡單實用的解決方案。但伴隨著互聯網應用的深入，系統的功能越來越多，其復雜度也越來越高，在Spring中，大量的XML配置，以及與第三方框架的整合問題，給系統開發者帶來了極大的痛苦。因此，SpringBoot框架應運而生了，其設計的目的就是用來簡化Spring應用的初始化搭建以及開發過程，它采用了特定的方式進行配置，大大減少了項目中的XML配置，使開發人員可以通過少量的注解即可實現項目的自動化配置，以及導入相關的依賴，即可實現與第三方框架進行整合，極大地提高了系統開發的效率。

1.3 Apache Shiro安全框架

在早期的Web應用中，安全性與權限主要通過HttpSessions與數據加密來實現，但這樣的方式，應用時非常麻煩，因此，應運而生了Apache Shiro框架。它是一個簡單易用且功能強大的Java安全框架，它能夠為Web應用系統提供用戶認證、授權、數據加密以及會話管理等功能，可以為任何應用提供強大的安全保障。由于其易用性、靈活性、對Web的支持、可插拔、強大的技術支持等特性，在權限管理系統中得到了廣泛的應用。

2 前后端分離框架技術在權限系統中的應用分析

在所有的權限管理系統中，都需要實現以下兩方面的功能，一是確定訪問系統的用戶身份，二是對用戶的權限進行管理。在傳統前后端不分離的情況下，路由都由后端統一管理，通過對訪問的URL進行驗證實現權限的管理。在前后端分離模式中，由于前后端都有相應的路由，而且項目不再基于session了，如何確定訪問者的身份、確認訪問者的權限呢？

2.1 基于角色的訪問控制（RBAC）

在不同的應用系統中，權限管理系統的權限控制部分是不同的，傳統的權限管理在應用于不同的系統時，需要對權限控制部分進行重新設計，因此，基于角色的訪問控制得到了應用。它將用戶和系統的權限進行了分離，用戶在系統中可以配置為不同的角色，通過角色獲得該角色所擁有的權限，不僅有效地減少了授權的復雜性，還降低了出錯的概率。

在RBAC 模型中，主要分為用戶、角色、權限、資源和操作五個元素，通過將用戶與系統權限分離，使得系統中用戶的認證和授權更加靈活。一個用戶可以擁有多個角色，因此，一個用戶可以根據不同的應用場景，相應地擁有不同的角色所擁有的權限。

RBAC模型主要分為用戶表、角色表、用戶角色表、資源表、角色資源表，用戶表保存用度的賬號、密碼等信息，角色保存用戶角色，用戶角色表保存用戶的角色，角色資源表保存角色所擁有的權限，資源表保存系統中存在的資源，主要url、path、component、name等字段，path表示后端接口的路徑，用于后端權限控制;path表示前端路由的路徑，用于前端頁面級的權限驗證。component表示前端路由路徑下的組件;name表示菜單的名稱，parentID表示父級菜單的編號，用于生成菜單。

2.2 身份驗證與權限認證

當用戶訪問權限管理系統時，首先判斷用戶是否執行了登錄操作，如果用戶沒有登錄，Apache Shiro的安全模塊會阻止用戶訪問一切資源，只有用戶通過身份認證才可以使用系統，當ApacheShiro接收到用戶的登錄請求后，會通過該請求獲得用戶在登錄頁面輸入的用戶名和密碼，然后查詢數據庫，取得用戶的相關信息，例如密碼，然后與用戶輸入的進行比對，如果比對成功則說明用戶是合法用戶，則允許用戶進入權限管理主界面，否則返回給前端相應的錯誤信息。

當用戶通過身份驗證之后，Shiro會將已登錄用戶的相關信息保存在Session對象中，例如其上次登錄時間、時間戳、最后操作時間等。當用戶退出系統后，存儲該用戶相關信息的Session將會被系統清理，也就是說用戶再次訪問系統必須重新進行登錄。

RBAC中用戶的權限是與其當前的角色相關的，不同的角色在系統中的權限不同，用戶成功登錄后，服務端即根據數據庫中用戶的角色，取得該用戶所擁有的所有權限，當前端訪問后端API時，Shiro會根據數據庫中的用戶權限進行認證，如果認證失敗，則向前端返回認證失敗信息，從而實現權限認證。

2.3 前后端技術在系統中職責的改變

前后端分離后，由于前后端都有相應的路由技術，權限管理則面臨著前端一個頁面同時調用后端多個接口的問題，傳統的通過URL對用戶權限進行驗證方法則不適用了，因此，則需要前后端共同對權限進行控制。

前后端分離后，基本思想是，前端通過后端提供的API接口向服務端（后端）請求數據，請求時需要攜帶token信息，服務端（后端）則根據token判斷用戶的登錄狀態、用戶的權限等。

前端主要實現用戶登錄頁面、錯誤信息頁和管理系統主頁面三個頁面，用戶登錄成功時跳轉到管理系統主頁。在進入主頁之前，通過調用后端API接口獲取用戶角色所對應的資源，生成系統管理菜單，然后通過菜單的點擊實現前端的路由跳轉，以加載呈現不同的功能頁面，實現相關業務的操作。

在此種情況下，會出現另外一個問題，假如某個用戶登錄之后記下了一個自己沒有訪問權限的路由URL，然后通過在地址欄手動輸入該URL以訪問受限的資源，因為實現了前后端分離，此時的后端并不了解前端路由變化引起的頁面跳轉，則會給系統帶來極大的安全隱患。所以在前后端的分離中，除了后端進行權限的認證外，前端同樣也需要進行權限的認證。在Vue.js中可以通過它提供的路由守衛來進行邏輯判斷，實現前端的權限認證。例如在路由進入前的鉤子中，首先獲取存儲在cookie中的token信息，如果沒有token信息，則通過前端路由跳轉到用戶登錄頁面。如果存在token信息，則對用戶需要訪問的目標（資源）進行權限的判斷，如果不需要授權，則直接進行訪問，如果需要進行授權，則根據后端返回給前端的用戶信息，進行權限的驗證，如果在授權頁面中，則構造路由信息，動態加載路由信息，訪問目標頁面。

后端則除了進行傳統的權限認證管理外，還需要根據權限控制的粒度向前端返回不同的數據。例如頁面權限，后端根據用戶信息篩選有權限的頁面（接口）返回給前端相應的用戶信息;按鈕權限，后端則將用戶擁有的按鈕數據返回給前端，前端通過自定義的相關指令判斷用戶是否擁有特定按鈕的權限。

3 結論

隨著互聯網技術的發展和應用的深入，應用系統的安全性越來越受到人們的關注。本文基于目前流行的前后端分離技術架構，對基于RBAC權限管理系統的設計進行探索和分析，對目前常用的前后端開發技術在系統中的應用進行思考，本文僅僅對應用前后端分離技術進行權限管理進行了分析，并沒有進行實現，通過本文，有望能為系統的開發者提供一個設計的思路，提供一個參考。

參考文獻：

[1] 王鋒，劉俊波.前后端分離模式下的WEB系統集成方案[J].通信技術，2020，53（9）：2347-2350.

[2] 廖祥.基于前后端分離架構的用戶權限控制系統設計與實現[J].軟件工程，2020，23（12）：24-26.

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

[4] 何鼎權，胡輝，嚴家成.基于RBAC的通用權限管理系統[J].電腦知識與技術，2020，16（33）：97-102.

[5] 傅安中，王祥榮.基于Apache Shiro的儲物管理系統權限管理研究與實現[J].電腦編程技巧與維護，2020（3）：99-102.

[6] 白嘉萌，寇英帥，劉澤藝，等.云計算平臺基于角色的權限管理系統設計與實現[J].信息網絡安全，2020，20（1）：75-82.

【通聯編輯：唐一東】