實現SpringBoot+Angular普通登陸

零

本文基於《SpringBoot+Angular入門實例教程》第5.1節的內容理解並簡化而來。
本文的目的淺析先後臺分離的普通登陸數據流。

1、基本問題

簡圖以下：

數據流

SpringBoot+Angular的數據流，請參考個人上一篇SpringBoot+Angular先後端分離的數據流淺析。

簡而言之：
C層負責數據轉發，
M層（Service服務層）負責具體的數據處理和發出請求，
前臺的V層是頁面模板，負責組件渲染
後臺的倉庫層負責和數據庫直接對話
前臺的實體、後臺的實體和數據庫的字段一一對應。

先後臺的分工？

在這個登陸功能中，後臺惟一的做用就是隻作數據驗證。
當用戶登陸時，前臺向後臺發起用戶名、密碼驗證的請求，若是後臺驗證成功，就返回真，不然返回假。當前臺接收到返回值後，再判斷用戶是否登陸成功。

登陸狀態保存在哪？

一開始，能夠保存在app組件中，而後V層使用ngIf直接獲取C層變量就能夠獲取登陸狀態，可是依賴登陸狀態的

登陸狀態儲存在前臺的服務層的一個變量中，全部的組件在渲染前都去找這個登陸服務要數據，若是用戶處於登陸狀態，就正常跳轉，不然跳轉到登陸頁。

登陸和註銷動做

初始化時，登陸狀態爲假。
登陸時，若是後臺返回值是真，就把登陸狀態變量改成真，不然不變。
註銷是，只需把登陸狀態改成假，便可。

2、詳解登陸註銷過程

登陸

1. 用戶提交Form表單，觸發C層onSubmit()方法
2. C層調用服務的Login()方法
3. teacher服務向後臺發起Http請求，傳入用戶名和密碼
4. 後臺C層調用M層Login方法，傳入用戶名密碼
5. 後臺M層調用倉庫findByUsername方法，傳入Username
6. 後臺倉庫使用SQL從數據庫中去除對象，並返回給M層
7. 後臺M層調用ValidatePassword把倉庫返回的用戶密碼和C層傳入的密碼比較，若是一致就返回True
8. 後臺C層把布爾值返回給前臺
9. 前臺teacher服務層把接受的布爾值返回給C層
10. 前臺C層判斷返回的數據是否爲真，若爲真，就調用M層setLogin方法，把登陸狀態修改成1
11. 前臺C層返回，跳轉對應的界面

跳轉

1. 瀏覽器輸入Url觸發方法，生成組件
2. C層向Teacher服務訂閱登陸組件
3. C層獲取登陸狀態isLogin$並賦值給本類的islogin
4. V層渲染頁面，根據C的登陸狀態來決定顯示那些內容，若是未登陸就顯示登陸頁
5. 把頁面返回給瀏覽器

註銷

1. 瀏覽器觸發導航欄C層Logout方法
2. 導航欄調用M層setIsLogin(flase)，把登陸狀態改爲0
3. M層返回
4. 把登陸頁返回給瀏覽器

3、合併圖片

4、存在的問題

當前的全部驗證都只是在前臺，後臺沒有任何驗證，用戶無需認證即可以經過瀏覽器或是其它的REST工具對後臺進行肆意操做。一個形同虛設的登陸功能只是擋住了一些正常的用戶，但對一些非法用戶的入侵卻毫無防範。甚至於後臺根本就沒有能力判斷是誰正在進行數據請求，權限控制固然也就無從談起。
本文的圖片只是解釋了教程中的邏輯，使教程更容易理解，因此更好的方式仍是使用安全性更高的token令牌機制。

教程源碼：https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step5.1.6