完美实现SpringBoot+Angular普通登录
??點(diǎn)擊上方?好好學(xué)java?,選擇?星標(biāo)?公眾號
重磅資訊、干貨,第一時(shí)間送達(dá) 今日推薦:2020,搞個(gè) Mac 玩玩!個(gè)人原創(chuàng)+1博客:點(diǎn)擊前往,查看更多 作者:LYX6666 鏈接:https://segmentfault.com/a/1190000021873471零
本文基于《SpringBoot+Angular入門實(shí)例教程》第5.1節(jié)的內(nèi)容理解并簡化而來。本文的目的淺析前后臺分離的普通登錄數(shù)據(jù)流。
一、基本問題
簡圖如下:
數(shù)據(jù)流
SpringBoot+Angular的數(shù)據(jù)流,請參考我的上一篇SpringBoot+Angular前后端分離的數(shù)據(jù)流淺析。
簡而言之:C層負(fù)責(zé)數(shù)據(jù)轉(zhuǎn)發(fā), M層(Service服務(wù)層)負(fù)責(zé)具體的數(shù)據(jù)處理和發(fā)出請求, 前臺的V層是頁面模板,負(fù)責(zé)組件渲染 后臺的倉庫層負(fù)責(zé)和數(shù)據(jù)庫直接對話 前臺的實(shí)體、后臺的實(shí)體和數(shù)據(jù)庫的字段一一對應(yīng)。
前后臺的分工?
在這個(gè)登錄功能中,后臺唯一的作用就是只做數(shù)據(jù)驗(yàn)證。當(dāng)用戶登錄時(shí),前臺向后臺發(fā)起用戶名、密碼驗(yàn)證的請求,如果后臺驗(yàn)證成功,就返回真,否則返回假。當(dāng)前臺接收到返回值后,再判斷用戶是否登錄成功。
登錄狀態(tài)保存在哪?
一開始,可以保存在app組件中,然后V層使用ngIf直接獲取C層變量就可以獲取登錄狀態(tài),但是依賴登錄狀態(tài)的
登錄狀態(tài)儲存在前臺的服務(wù)層的一個(gè)變量中,所有的組件在渲染前都去找這個(gè)登錄服務(wù)要數(shù)據(jù),如果用戶處于登錄狀態(tài),就正常跳轉(zhuǎn),否則跳轉(zhuǎn)到登錄頁。
登錄和注銷動作
初始化時(shí),登錄狀態(tài)為假。登錄時(shí),如果后臺返回值是真,就把登錄狀態(tài)變量改為真,否則不變。注銷是,只需把登錄狀態(tài)改為假,即可。
二、詳解登錄注銷過程
登錄
圖片.png用戶提交Form表單,觸發(fā)C層onSubmit()方法
C層調(diào)用服務(wù)的Login()方法
teacher服務(wù)向后臺發(fā)起Http請求,傳入用戶名和密碼
后臺C層調(diào)用M層Login方法,傳入用戶名密碼
后臺M層調(diào)用倉庫findByUsername方法,傳入U(xiǎn)sername
后臺倉庫使用SQL從數(shù)據(jù)庫中去除對象,并返回給M層
后臺M層調(diào)用ValidatePassword把倉庫返回的用戶密碼和C層傳入的密碼比較,如果一致就返回True
后臺C層把布爾值返回給前臺
前臺teacher服務(wù)層把接受的布爾值返回給C層
前臺C層判斷返回的數(shù)據(jù)是否為真,若為真,就調(diào)用M層setLogin方法,把登錄狀態(tài)修改為1
前臺C層返回,跳轉(zhuǎn)對應(yīng)的界面
跳轉(zhuǎn)
圖片.png瀏覽器輸入U(xiǎn)rl觸發(fā)方法,生成組件
C層向Teacher服務(wù)訂閱登錄組件
C層獲取登錄狀態(tài)isLogin$并賦值給本類的islogin
V層渲染頁面,根據(jù)C的登錄狀態(tài)來決定顯示那些內(nèi)容,如果未登錄就顯示登錄頁
把頁面返回給瀏覽器
注銷
圖片.png瀏覽器觸發(fā)導(dǎo)航欄C層Logout方法
導(dǎo)航欄調(diào)用M層setIsLogin(flase),把登錄狀態(tài)改成0
M層返回
把登錄頁返回給瀏覽器
三、合并圖片
圖片.png四、存在的問題
當(dāng)前的所有驗(yàn)證都只是在前臺,后臺沒有任何驗(yàn)證,用戶無需認(rèn)證便可以通過瀏覽器或是其它的REST工具對后臺進(jìn)行肆意操作。一個(gè)形同虛設(shè)的登錄功能只是擋住了一些正常的用戶,但對一些非法用戶的入侵卻毫無防范。甚至于后臺根本就沒有能力判斷是誰正在進(jìn)行數(shù)據(jù)請求,權(quán)限控制當(dāng)然也就無從談起。本文的圖片只是解釋了教程中的邏輯,使教程更容易理解,所以更好的方式還是使用安全性更高的token令牌機(jī)制。
教程源碼:https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step5.1.6
總結(jié)
以上是生活随笔為你收集整理的完美实现SpringBoot+Angular普通登录的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 手把手教你手动创建线程池
- 下一篇: 八个开源的 Spring Boot 学习