SpringBootSecurity學習(12)前後端分離版之簡單登錄

前後端分離

前面討論了springboot下security很多常用的功能,其它的功能建議參考官方文檔學習。網頁版登錄的形式現在已經不是最流行的了,最流行的是前後端分離的登錄方式,前端單獨成爲一個項目,與後臺的交互,包括登錄認證和授權都是由異步接口來實現。在前後端不分離的應用模式中,前端頁面看到的效果都是由後端控制,由後端渲染頁面或重定向,也就是後端需要控制前端的展示,前端與後端的耦合度很高。這種應用模式比較適合純網頁應用,

file

但是當後端對接App時,App可能並不需要後端返回一個HTML網頁,而僅僅是數據本身,所以後端原本返回網頁的接口不再適用於前端App應用,爲了對接App後端還需再開發一套接口。

在前後端分離的應用模式中,後端僅返回前端所需的數據,不再渲染HTML頁面,不再控制前端的效果。至於前端用戶看到什麼效果,從後端請求的數據如何加載到前端中,都由前端自己決定,網頁有網頁的處理方式,App有App的處理方式,但無論哪種前端,所需的數據基本相同,後端僅需開發一套邏輯對外提供數據即可。在前後端分離的應用模式中 ,前端與後端的耦合度相對較低。

file

在前後端分離的應用模式中,我們通常將後端開發的每個視圖都稱爲一個接口,或者API,前端通過訪問接口來對數據進行增刪改查。

前後端分離出現的跨域問題

前後端分離後,出現的經典問題就是跨域問題。跨域,指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源(域名,協議,端口)策略造成的,是瀏覽器對JavaScript施加的安全限制。具體的跨域理論跨域自行查詢學習。在security中,解決跨域問題是非常簡單的。只需要增加幾行配置即可。

簡單示例

來寫一個簡單的例子來實現前後端分離的異步登錄。首先引入依賴:

file

修改springboot默認配置文件,添加默認用戶:

file

啓動類不用修改,添加一個接口:

file

下面來配置security配置類,首先配置登錄,異步登錄不再需要後臺配置登錄頁面地址,只需要配置登錄參數和api地址即可:

file

然後加上授權配置和登錄成功的處理:

file

最後加上csrf配置:

file

最簡單的配置已經完成了,最後來看一下登錄成功的處理:

file

返回了一個json形式的登錄成功消息。

簡單測試

來進行一個簡單的測試,啓動項目,使用postman直接訪問hello接口:

file

訪問不成功,返回了登錄的html頁面,關於沒有權限的處理,後面會做的更加友好。下面用接口進行登錄:

file

可以看到正常登錄成功,postman中也多了一個cookie信息:

file

這和瀏覽器的cookie是一樣的,刪掉以後就成了未登錄狀態。現在訪問hello接口,可以看到正常的效果:

file

添加跨域

添加跨域配置非常簡單,首先在security配置中調用cors方法:

file

然後我們打開springboot的官方文檔,查看跨域配置:

file

可以看到,在springboot中,全局的跨域配置非常簡單,我們來模仿寫一個bean:

file

這樣跨域就配置好了。

其它處理器

來看一下登錄失敗(比如賬號錯誤)時的處理器:

file

配置登錄失敗處理器:

file

測試:

file

來看一下登錄超時或者未登錄的異常處理器:

file

配置登錄超時或者未登錄處理器:

file

測試,在未登錄的情況下,直接訪問hello接口:

file

現在提示友好了很多。最後看一下權限不足處理器:

file

配置權限不足處理器:

file

然後開啓方法級別的權限註解,在hello方法上面配置HELLO權限:

file

在配置文件中,給默認用戶admin配置一個其他角色:

file

然後重啓項目,首先在postman中,進行登錄,然後再訪問hello接口:

file

此時就會根據處理器的結果提示權限不足。

說明

上面是一個簡單的前後端分離的登錄的例子。這裏只應用了幾個簡單的功能,不過前面討論過的從數據庫中查詢用戶,動態權限,共享session,記住我等等的功能,也都可以加入到前後端分離的登錄功能中,這些內容的使用和前面網頁版的登錄沒有什麼區別。使用這些完全可以滿足前後端分離的登錄和授權功能。

代碼地址 : https://gitee.com/blueses/spring-boot-security 12