基于前后端分離和Spring Security的用戶登錄功能的設計與實現*

宋馨來，張海濤

（重慶工程學院，重慶 400056）

由于使用B/S模式開發的項目具有無須安裝即可使用和升級維護方便的優點，B/S模式逐漸超越C/S模式成為主流的應用程序開發模式。而使用Java開發Web應用程序又是B/S開發模式的主流方式。傳統的Java Web應用程序開發基于Servlet技術，通常使用JSP+JavaBean+Servlet進行開發。這種開發模式存在以下缺點：

（1）對項目開發人員的技能要求高，項目開發周期較長。該開發模式下，通常開發人員不僅要設計與開發后臺服務，還要負責前端頁面的設計與開發，如果由專門的前端開發人員來開發前端頁面，最后還需要將前端代碼和后端代碼融合并進行功能聯調，這顯然會增加開發時間降低開發速度。前后端拉通則要求開發人員熟練掌握前后端開發技術，會增加開發人員的技能學習成本，給開發人員帶來沉重的負擔。

（2）從項目維護和擴展的角度來說，隨著網站流量的增加和項目架構的不斷演進，項目勢必要進行升級擴展和結構優化。傳統的開發模式中前后端代碼耦合在一起，造成代碼的可讀性以及可擴展性不高,給后期項目的維護和擴展增加了難度和成本，可能會影響項目的更新上線速度，降低網站的訪問流量，對企業造成損失[1]。

前后端分離開發模式下，后臺服務只負責提供數據、前端負責解析數據和頁面渲染，后端開發人員負責業務和數據接口，前端開發人員負責展現和交互邏輯，前后端可以并行開發來提高開發效率，前后端分開部署則避免了職責不清晰導致的開發人員踢皮球問題，提高了問題定位效率，進而加快項目上線速度，有利于搶占市場[2]。

因前后端分離的開發模式較好地解決了傳統的Java Web應用程序開發模式存在的對開發人員的技能要求高、開發周期較長和項目維護及擴展困難等問題，而逐漸興起。

1 前后端分離模式

如果將Web頁面當作前端，那么后端的功能就是提供數據，則可以將前后端分離模式簡化，如圖1所示。

圖1 前后端分離架構示意圖

前后端分別由專門的開發人員進行開發并且分開部署，分工明確，互不影響，可以準確判定問題是誰的，避免了前后端代碼糅合在一起無法及時判定責任方而導致互相推諉的問題。

前后端交互可簡化為前端通過URL調用后端API接口傳遞數據。當然，在軟件開發之前，需要前后端的開發人員對API接口的訪問路徑、參數和返回數據的類型等協商達成一致。

2 用戶登錄功能的實現

后端采用SpringBoot+Spring Security安全框架，前端則采用目前比較流行的前端框架Vue.js，兩者結合實現前后端分離[3]。

2.1 用戶登錄功能的后端實現

采用SpringBoot+Spring Security安全框架并且前后端不分離的情況下，實現用戶登錄功能是比較簡單的，主要工作為編寫表單登錄頁面和在Web Security Configuration的configure(HttpSecurity http)中配置表單認證，登錄系統認證成功后會跳轉到目標頁面。在前后端分離時這種方法就行不通了，可在configure(HttpSecurity http)中添加自定義的登錄過濾器來實現，前端根據后端返回的JSON數據確定登錄成功與否，并由前端決定登錄成功后如何跳轉頁面。關鍵代碼如下：

2.2 用戶登錄功能的前端實現

前端采用Vue.js實現，Vue.js是一個輕量級的構建用戶界面的漸進式JavaScript框架，其核心庫只關注視圖層，不僅簡單易用，還便于與第三方庫或既有項目整合，與工具鏈以及各種支持類庫結合使用時，Vue.js也完全能夠為復雜的單頁應用提供驅動。

使用Vue CLI創建Vue項目，并結合Node.js實現了前端的部署，實現了前后端的完全分離。前端項目的關鍵代碼如下：

登錄頁面Login.vue中處理用戶登錄的方法定義如下：

對登錄請求的URL進行路由配置后，前端就可以通過axion發起HTTP請求訪問后端API，然后根據后端返回的JSON數據進行前端渲染。

3 結束語

用戶登錄功能是Web應用程序的必備功能，雖然采用傳統的Web應用程序開發技術也方便實現，但隨著移動互聯網的迅猛發展，后臺服務在設計時不僅要考慮支持PC端還要考慮支持移動端。基于前后端分離和Spring Security來實現的用戶登錄功能，可方便后續支持接入移動端的用戶登錄功能和隨著后臺業務拓展帶來的用戶授權功能。