完美實現SpringBoot+Angular普通登錄
- 2020 年 3 月 12 日
- 筆記
重磅資訊、乾貨，第一時間送達今日推薦：2020，搞個 Mac 玩玩！個人原創+1博客：點擊前往，查看更多
作者：LYX6666 鏈接：https://segmentfault.com/a/1190000021873471
零
本文基於《SpringBoot+Angular入門實例教程》第5.1節的內容理解並簡化而來。本文的目的淺析前後台分離的普通登錄數據流。
一、基本問題
簡圖如下：
數據流
SpringBoot+Angular的數據流，請參考我的上一篇SpringBoot+Angular前後端分離的數據流淺析。
簡而言之：C層負責數據轉發， M層（Service服務層）負責具體的數據處理和發出請求， 前台的V層是頁面模板，負責組件渲染 後台的倉庫層負責和數據庫直接對話 前台的實體、後台的實體和數據庫的字段一一對應。
前後台的分工？
在這個登錄功能中，後台唯一的作用就是只做數據驗證。當用戶登錄時，前台向後台發起用戶名、密碼驗證的請求，如果後台驗證成功，就返回真，否則返回假。當前台接收到返回值後，再判斷用戶是否登錄成功。
登錄狀態保存在哪？
一開始，可以保存在app組件中，然後V層使用ngIf直接獲取C層變量就可以獲取登錄狀態，但是依賴登錄狀態的
登錄狀態儲存在前台的服務層的一個變量中，所有的組件在渲染前都去找這個登錄服務要數據，如果用戶處於登錄狀態，就正常跳轉，否則跳轉到登錄頁。
登錄和註銷動作
初始化時，登錄狀態為假。登錄時，如果後台返回值是真，就把登錄狀態變量改為真，否則不變。註銷是，只需把登錄狀態改為假，即可。
二、詳解登錄註銷過程
登錄
圖片.png
- 用戶提交Form表單，觸發C層onSubmit()方法
- C層調用服務的Login()方法
- teacher服務向後台發起Http請求，傳入用戶名和密碼
- 後台C層調用M層Login方法，傳入用戶名密碼
- 後台M層調用倉庫findByUsername方法，傳入Username
- 後台倉庫使用SQL從數據庫中去除對象，並返回給M層
- 後台M層調用ValidatePassword把倉庫返回的用戶密碼和C層傳入的密碼比較，如果一致就返回True
- 後台C層把布爾值返回給前台
- 前台teacher服務層把接受的布爾值返回給C層
- 前台C層判斷返回的數據是否為真，若為真，就調用M層setLogin方法，把登錄狀態修改為1
- 前台C層返回，跳轉對應的界面
跳轉
圖片.png
- 瀏覽器輸入Url觸發方法，生成組件
- C層向Teacher服務訂閱登錄組件
- C層獲取登錄狀態isLogin$並賦值給本類的islogin
- V層渲染頁面，根據C的登錄狀態來決定顯示那些內容，如果未登錄就顯示登錄頁
- 把頁面返回給瀏覽器
註銷
圖片.png
- 瀏覽器觸發導航欄C層Logout方法
- 導航欄調用M層setIsLogin(flase)，把登錄狀態改成0
- M層返回
- 把登錄頁返回給瀏覽器
三、合併圖片
圖片.png
四、存在的問題
當前的所有驗證都只是在前台，後台沒有任何驗證，用戶無需認證便可以通過瀏覽器或是其它的REST工具對後台進行肆意操作。一個形同虛設的登錄功能只是擋住了一些正常的用戶，但對一些非法用戶的入侵卻毫無防範。甚至於後台根本就沒有能力判斷是誰正在進行數據請求，權限控制當然也就無從談起。本文的圖片只是解釋了教程中的邏輯，使教程更容易理解，所以更好的方式還是使用安全性更高的token令牌機制。
教程源碼：https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step5.1.6
