实现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