您现在的位置是:首页 > 正文

完美实现SpringBoot+Angular普通登录

2024-01-30 20:53:28阅读 0

编辑:业余草

来源:https://www.xttblog.com/?p=4881

本文基于《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

网站文章

  • 交换-STP

    交换-STP

    2024-01-30 20:53:22
  • 有关《函数模板》的那些小知识-.-

    有关《函数模板》的那些小知识-.-

    本文介绍函数模板的概念、用途以及如何创建函数模板和函数模板的使用方法......函数模板定义的一般形式如下:之前我们知道的交换两个变量的方法有宏定义、函数,这两种方式都能实现两个变量的交换,但是各有各...

    2024-01-30 20:53:16
  • 辗转相除法求最大公约数

    辗转相除法求最大公约数

    由此可见,a和b都是d的倍数,所以d是a和b的最大公因数(最大是因为我们在第3步时就停止了分割线段,此时恰好整除,所以是最大)我们以及对求最大公因数有了形象上的了解,那么下面要做的就是将其写成代码。最...

    2024-01-30 20:52:47
  • Spring生命周期讲的比较好的文章

    https://www.jianshu.com/p/1dec08d290c1我画的流程图,参照:https://www.processon.com/view/link/5f915d30e401fd06fd9c0b96

    2024-01-30 20:52:35
  • html关系选择符,CSS关系选择器和属性选择器

    html关系选择符,CSS关系选择器和属性选择器

    1.1. 关系选择器关系选择器是通过元素之间的“位置关系的特征”来确定所选元素。1.1.1. 子代选择器:S1>S2语法:选择器1>选择器2匹配S1中的下一级S2。下一级就是“子级”,或子代。其中S1,S2都可以是独立使用的选择器(比如id选择器,class选择器,标签选择器等)。1.1.2. 后代选择器:S1 S2语法:选择器1 选择器2【派生选择器】匹配S1内部的所有后代S2。...

    2024-01-30 20:52:05
  • 本地MySQL数据库其他电脑局域网访问

    本地MySQL数据库其他电脑局域网访问

    一般情况下是访问不了的 ,需要改两个地方首先查看局域网本地ipipconfig第一步首先本地用 Navicat 本地连接 打开数据库 (MySQL)/user表把user字段为root的 Host字段改成%第二步打开Windows防火墙 点击高级设置步骤阅读点击进去 点入站规则在点击新建规则选择端口 进行下一步填入330...

    2024-01-30 20:52:00
  • Intel8086处理器使用NASM汇编语言实现操作系统04-实模式-屏幕显示不定长度的字符串(cmp/je)

    怀念二抱三抱

    2024-01-30 20:51:52
  • 【自学笔记】web前端 - HTML - DAY01(编辑器+基础标签)

    【自学笔记】web前端 - HTML - DAY01(编辑器+基础标签)

    这里是Jane的自学笔记之Web前端系列~ (希望周更ᕦ(・ㅂ・)ᕤ)如果内容有问题,欢迎大家私信留言、批评指出,谢谢~主要是记录和分享,嘻嘻(〃‘▽’〃)文章目录编辑器HBuilder记事本Node...

    2024-01-30 20:51:25
  • Android之Activity的4种加载模式

    一个Task可以理解成一个Activtiy栈,可以装载一个或者多个Activity,回退和打开的顺序逻辑和基本的数据结构栈是一致的。下面的这段话非常关键:那就是,一个Application如果有N个Activity,这些Activity分布在M个Task中,那么Application的回退栈会遵循这样的原则,首先从当前Acitivty在的Task回退,直到这个Task中再无记录;那么会寻找下一个T

    2024-01-30 20:51:16
  • 分享一个随手写的简单css效果

    分享一个随手写的简单css效果

    随手制作的简单css效果前言效果图代码HTMLCSS介绍推荐Uigradients中国传统配色网站Colordrop前言 刚刚随手写了一个网页,添加了一点css的效果,虽然没有很惊艳,但个人认为有点意...

    2024-01-30 20:51:07