自定义登录页面

前面无论是使用默认配置,还是自定义配置类,都是使用的springboot-security自带的登录页面,自带的登录页面在这个版本虽然设计的非常不错,但是在实际开发中,我们通常还是使用自己的登录页面。下面来写一个非常简单的登录页面:

这个页面只有填写用户名和密码的地方,然后就是一个form表单提交,没有任何其他内容。特别注意!!这里页面虽然引入了thymeleaf模板,但是没有使用thymeleaf的任何标签属性,使用的是原生的html标签。继续下面,然后是定义登录页面的路径:

这样登录页面就添加完成了。

修改配置类

在配置类中添加自定义登录页面很简单,定义登录页面链接即可:

配置完成后,启动项目,访问登录页面,可以看到这样一个错误:

显示重定向次数过多。原来前面我们授权配置的时候,所有自定义的路径在未登录的情况下,都会重定向到登录页面,现在登录路径也是自定义的,所以它一直在自我重定向。登录路径本身要配置成不需要授权就能访问的路径才合理。配置方式很简单,只需要加上一个 permitAll 方法即可:

现在重启项目,访问登录可以正常访问,输入账号也可以正常访问了!

csrf配置

上面的页面和配置类修改好了以后,输入账号登录,却发现登录一直不成功,总是会跳转到登录页面。这是什么原因呢?上面的提到了页面使用的是原生的html标签,没有使用thymeleaf模板的属性。先说这种原生的情况,之所以登录不成功,原因是Spring Security默认是开启CSRF的,所以需要请求中包含CSRF的token信息,在其官方文档中,提供了在form中嵌入一个hidden标签来获取token信息,其原理是,hidden标签使用了Spring Security提供的标签,即${csrf.parameterName}、${csrf.token}, 后台页面渲染过程中,将此标签解所对应的值解析出来,这样,我们的form表单,就嵌入了Spring Security的所需的token信息,在后续的提交登录请求时,就不会出现没有CSRF token的异常。做法如下:

这时候登录,就发现可以成功。在springboot2.1.x版本下,还有第二种更好的解决方案,就是使用thymeleaf模板的form标签属性:

在form标签中,使用th:action属性,这样会在表单中默认添加一个hidden的input标签,效果和第一种解决方式类似,查看源码,就可以看到:

另外,还有一个解决办法是,通过关闭CSRF来解决,这个几乎在任何场景中都能解决这个问题(上面这个解决方案,可能在某些渲染模板不能解析出来token值,不过可以通过后台程序来获取token值,然后自己定义变量来渲染到form中,这个也是可以的)。具体的做法是通过修改配置文件来关闭,我这里使用的是SpringBoot开发的项目,配置文件直接写在配置类中,通过.csrf().disable()来关闭。不过这种方案,会迎来CSRF攻击,不建议在生产环境中使用,如果系统对外界做了隔离,这样做也是可以的。大部分的生产环境采用的也多是这种方案。

上面三种解决方案都可以解决登录不成功的问题。

配置登录成功后的默认页面

现在security登录成功后默认会跳转到一个路径,这个路径就是登录链接去掉后面的/login,这个默认跳转也是可以配置的:

然后再把默认页面改为/home路径:

现在我们登录成功,跳转的就是/home:

配置登出

除了登录,security还有自带的登出,即退出系统功能,默认路径就是/logout。我们可以在home页面中加一个登出操作:

退出后,默认进入的自然是登录页面,但是浏览器路径上面,要显示出刚才是退出系统了。所以应该显示的路径是/login?logout,但是由于这个路径没有授权,会再次跳转到登录页面,显示的也就还是/login,所以我们对登出也要进行授权:

现在显示的就是正常的退出后的路径:

代码地址 : https://gitee.com/blueses/spring-boot-security 03

flowable 配置自定义表单_SpringBootSecurity学习(03)网页版登录添加自定义登录页面...相关推荐

  1. flowable 配置自定义表单_Flowable用代码自定义流程

    项目集成flowable有段时间了,发现行业的流程业务全是一条直线加3,4个人工审核的节点,并没有分支网关等其它节点.因此原来用的model设计器组件多参数复杂,客户现场的体验不是很好.所以根据现场的 ...

  2. Flowable集成自定义表单001

    #Flowable集成自定义表单 flowable集成自定义表单实现低代码开发平台 文章目录 演示 一.代码地址 二.演示地址 总结 演示 后台配置流程和表单 一.代码地址 代码地址 二.演示地址 后 ...

  3. 关于低代码自定义表单的思路和想法

    最近在做项目时,遇到一个需求,需要页面配置自定义表单,然后供其他页面使用.大概整理了下思路,如下: 一.渲染规定好的组件,配置并保存表单,包括布局. 提前规定好可以使用的表单组件(表单组件封装,包括下 ...

  4. 工作流Flowable实战 (五)自定义表单

    文章目录 前言 一.Flowable自定义表单 二.自己实现的自定义表单 三.工作流中使用自定义表单 前言 Flowable中默认带了自定义表单,但无法满足项目需求,于是打算自己开发自定义表单 一.F ...

  5. 软件测试面试-自定义表单配置该如何测试?

    原题如下: 针对一个包含10个输入单元(文本框.下拉框等)的新增表单页面设计测试用例,要求说明总用例数.用例分类.各类别用例数:如果测试时间有限,如何设计与编写用例? 看起来很懵吧,各位软件测试的小伙 ...

  6. Angular学习笔记(五) - 自定义表单控件

    本文简单介绍封装使用ngModel实现自定义表单控件的过程. NgModel 相关 NgModel NgModel用于从作用域创建一个FormControl实例,并将它绑定到一个表单控件元素. ngM ...

  7. java 自定义表单 动态表单 表单设计器 工作流引擎 flowable

    自定义表单设计模块都有哪些? 1 定义模版:拖拽左侧表单元素到右侧区域,编辑表单元素,保存表单模版 2 表单模版:编辑维护表单模版,复制表单模版,修改模版类型,预览表单模版 3. 我的表单:选择表单模 ...

  8. createform用法_vue自定义表单生成器form-create使用详解

    介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可 ...

  9. 【.net+jquery】绘制自定义表单(含源码)

    前言 两年前的时候就想做一个类似的功能,当时思路大家都讨论好了,诸多原因最终还是夭折了.没想到两年多后再这有重新提出要写一个绘制表单的功能.对此也是有点小激动呢?总共用时8.5天的时间基本功能也就实现 ...

  10. SpringBoot 整合Security——自定义表单登录

    文章目录 一.添加验证码 1.1 验证servlet 1.2 修改 login.html 1.3 添加匿名访问 Url 二.AJAX 验证 三.过滤器验证 3.1 编写验证码过滤器 3.2 注入过滤器 ...

最新文章

  1. Xcode 5.0.1安装插件:规范注释生成器VVDocumenter + OSX 10.9.2
  2. codeforces 665B Shopping
  3. MAC 下SVN 删除文件失败 提示emains in tree-conflict
  4. vc实现透明位图,透明背景
  5. 网络安全隐性杀手:三类危险的TXT文件
  6. 阿里云技术白皮书_对阿里重磅发布的云原生架构白皮书的初步解读
  7. aws rds恢复数据库_使用AWS Glue将数据从AWS S3加载到AWS RDS SQL Server数据库
  8. Java学习笔记——StringBuffer类
  9. 大学生学科竞赛管理系统/竞赛管理系统的设计与实现
  10. Python学习笔记——python基础之python中for......else......的使用
  11. word文档删除空白页,选中空白页面按住 delete
  12. 工业相机镜头的视场角、焦距、光圈和景深的关系
  13. HTML中 <img>标签的用法
  14. 研究区分onbeforeunload事件是刷新还是关闭
  15. 联想拯救者常用快捷键
  16. 阿里云大数据分析师(ACP)认证,该如何备考?
  17. Seq2Seq模型介绍
  18. 调研分析:全球与中国多媒体投影仪镜头市场现状及未来发展趋势
  19. 热泵系统matlab仿真,热泵系统
  20. HP-UX文件系统清理

热门文章

  1. 文字识别成语音_广东人专属!微信语音转文字可以识别粤语了!
  2. UGUI直接修改Image的Color和用unity自带的UI Shadr修改_Color属性的区别
  3. 喇叭正反相位测试音频_音频功放失真的四大要点及改善方法
  4. python行业中性_燃爆!17行Python代码做情感分析?你也可以的
  5. shiro源码_基于Redis的shiro集中式缓存解决方案源码免费分享
  6. android studio react native 模拟器,Windows下搭建React Native环境与Android Studio集成
  7. 正在启动文档服务器,正在启动远程服务器
  8. 使用Requests+xpath实现简单的数据爬取
  9. AJAX 跨域访问 — 方法大全
  10. docker容器持久化卷讲解