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

宋馨來，張海濤

（重慶工程學(xué)院，重慶 400056）

由于使用B/S模式開發(fā)的項(xiàng)目具有無須安裝即可使用和升級維護(hù)方便的優(yōu)點(diǎn)，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進(jìn)行開發(fā)。這種開發(fā)模式存在以下缺點(diǎn)：

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

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

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

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

1 前后端分離模式

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

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

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

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

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

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

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

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

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

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

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

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

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

3 結(jié)束語

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