完美实现SpringBoot+Angular普通登录

重磅资讯、干货，第一时间送达今日推荐：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

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层返回，跳转对应的界面

跳转

图片.png

1. 浏览器输入Url触发方法，生成组件
2. C层向Teacher服务订阅登录组件
3. C层获取登录状态isLogin$并赋值给本类的islogin
4. V层渲染页面，根据C的登录状态来决定显示那些内容，如果未登录就显示登录页
5. 把页面返回给浏览器

注销

图片.png

1. 浏览器触发导航栏C层Logout方法
2. 导航栏调用M层setIsLogin(flase)，把登录状态改成0
3. M层返回
4. 把登录页返回给浏览器

三、合并图片

图片.png

四、存在的问题

当前的所有验证都只是在前台，后台没有任何验证，用户无需认证便可以通过浏览器或是其它的REST工具对后台进行肆意操作。一个形同虚设的登录功能只是挡住了一些正常的用户，但对一些非法用户的入侵却毫无防范。甚至于后台根本就没有能力判断是谁正在进行数据请求，权限控制当然也就无从谈起。本文的图片只是解释了教程中的逻辑，使教程更容易理解，所以更好的方式还是使用安全性更高的token令牌机制。

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