基于前后端分離和Spring Security的用戶登錄功能的設(shè)計與實現(xiàn)*

宋馨來，張海濤

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

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

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

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

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

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

1 前后端分離模式

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

圖1 前后端分離架構(gòu)示意圖

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

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

2 用戶登錄功能的實現(xiàn)

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

2.1 用戶登錄功能的后端實現(xiàn)

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

2.2 用戶登錄功能的前端實現(xiàn)

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

使用Vue CLI創(chuàng)建Vue項目，并結(jié)合Node.js實現(xiàn)了前端的部署，實現(xiàn)了前后端的完全分離。前端項目的關(guān)鍵代碼如下：

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

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

3 結(jié)束語

用戶登錄功能是Web應(yīng)用程序的必備功能，雖然采用傳統(tǒng)的Web應(yīng)用程序開發(fā)技術(shù)也方便實現(xiàn)，但隨著移動互聯(lián)網(wǎng)的迅猛發(fā)展，后臺服務(wù)在設(shè)計時不僅要考慮支持PC端還要考慮支持移動端?；谇昂蠖朔蛛x和Spring Security來實現(xiàn)的用戶登錄功能，可方便后續(xù)支持接入移動端的用戶登錄功能和隨著后臺業(yè)務(wù)拓展帶來的用戶授權(quán)功能。