当前位置： 首页 > news >正文

SpringSecurity6 | 自定义登录页面

news 2025/7/7 14:54:52

公众号封面

✅作者简介：大家好，我是Leo，热爱Java后端开发者，一个想要与大家共同进步的男人😉😉
🍎个人主页：Leo的博客
💞当前专栏： Java从入门到精通
✨特色专栏： MySQL学习
🥭本文内容：SSpringSecurity6 | 自定义登录页面
📚个人知识库 ：知识库，欢迎大家访问

学习参考 ：

  • 讲师：孙帅老师
  • 课程：孙哥说SpringSecurity6

image-20231030235443828

1.前言

大家好，我是Leo哥🫣🫣🫣，接到上一节，我们学习通过SpringSecurity的一些自定义配置来完成我们自定义认证规则的一些需求。这篇文章我们主要来介绍一下如何自定义我的登录页面。好了，话不多说让我们开始吧😎😎😎。

2.环境配置

首先先说明一下我们的环境配置和技术要求，我们还是会创建一个新的SpringBoot工程，对其进行一些自定义配置。

因为我们要自定义我们的登录页面，所以我们这里会用到一种后端模版引擎–>Thyemleaf。如果对Thyemleaf还不了解的同学，可以参考我这篇文章。

3.自定义登录页面

3.1 导入依赖

在我们的pom.xml文件中导入ThymeLeaf依赖。

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

3.2 创建login.html

并制定xml：th的映射，这里是为了可以在HTML中使用ThymeLeaf语法。

<!DOCTYPE html>
<html lang="en" xml:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Login Page</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;}.login-container {background-color: #fff;padding: 20px;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}.form-group {margin-bottom: 15px;}.form-group label {display: block;margin-bottom: 5px;}.form-group input {width: 100%;padding: 10px;border: 1px solid #ddd;border-radius: 5px;box-sizing: border-box; /* ensures padding doesn't affect width */}.form-group input[type="submit"] {background-color: #5c79b8;color: white;cursor: pointer;}.form-group input[type="submit"]:hover {background-color: #4cae97;}</style>
</head>
<body>
<div class="login-container"><h2>登录页面</h2><form><div class="form-group"><label for="username">用户名:</label><input type="text" id="username" name="name" required></div><div class="form-group"><label for="password">密码:</label><input type="password" id="password" name="passwd" required></div><div class="form-group"><input type="submit" value="Log In"></div></form>
</div>
</body>
</html>

简单在浏览器，看看我们简易的登录界面吧。

image-20231209211629716

3.3 配置

那我们如何将他配置为我们SpringSecurity的登录页面呢，通过以下配置。

首先我们在后端编写一个controller请求，也就是返回我们自定义的登录页面。

image-20231209212008381

注意：这里一定不要写成@RestController了，因为我们不需要向前端返回JSON数据哈。

然后我们在SpringSecurity的配置类进行配置我们的自定义登录页面。

image-20231209212732990

然后启动项目，访问hello接口。

但是我们发现一个问题，此时我们输入我们的用户名和密码却不能登录，而是会在浏览器进行刷新，我们接着往下看。

那么是怎么回事呢，此时我们需要回顾一下我们之前学习的知识，也就是我能当时查看表单登录的整合流程。

image-20231205201036604

他会调用 HttpSecurity 类的 formLogin() 方法，在该方法中创建 FormLoginConfigurer 类的实例，并指定处理认证的 Filter 进行认证：

image-20231205202326832

然后又去new了一个FormLoginConfigurer()，然后去调用父类的构造方法区new这个类

image-20231205202413310

image-20231209213412137

我们在UsernamePasswordAuthenticationFilter类中中的**attemptAuthentication()**方法中可以看到他的一些要求。

首先必须是POST请求，然后用户名的属性必须是username，密码的属性是password。

按照上面的解读，我们来按照规则改善一下我们的登录页面。

image-20231209214100245

还需要对我们的配置类做一些改变，这里的登录的url要和我们前端请求的保持一致。

image-20231209214135705

然后启动项目，再次访问。

Leo-2023-12-09-21-45-16

当然还有另外一种方式实现是通过Java配置类的方式，而不是更改name属性值。我们这里简单介绍一下。

image-20231209214829879

4.总结

以上便是本文的全部内容，本人才疏学浅，文章有什么错误的地方，欢迎大佬们批评指正！我是Leo，一个在互联网行业的小白，立志成为更好的自己。

如果你想了解更多关于Leo，可以关注公众号-程序员Leo，后面文章会首先同步至公众号。

公众号封面

相关文章：

SpringSecurity6 | 自定义登录页面

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; Java从入门到精通 ✨特色专栏&#xf…...

编程日记 2023/12/10 4:05:30

从单向链表中删除指定值的节点

输入一个单向链表和一个节点的值&#xff0c;从单向链表中删除等于该值的节点&#xff0c;删除后如果链表中无节点则返回空指针。 链表的值不能重复。构造过程&#xff0c;例如输入一行数据为:6 2 1 2 3 2 5 1 4 5 7 2 2则第一个参数6表示输入总共6个节点&#xff0c;第二个参数…...

编程日记 2023/12/10 4:04:29

Vue2与Vue3的语法对比

Vue2与Vue3的语法对比 Vue.js是一款流行的JavaScript框架&#xff0c;通过它可以更加轻松地构建Web用户界面。随着Vue.js的不断发展&#xff0c;Vue2的语法已经在很多应用中得到了广泛应用。而Vue3于2020年正式发布&#xff0c;带来了许多新的特性和改进&#xff0c;同时也带来…...

编程日记 2023/12/10 4:03:28

实时动作识别学习笔记

目录 yowo v2 yowof 判断是在干什么，不能获取细节信息 yowo v2 https://github.com/yjh0410/YOWOv2/blob/master/README_CN.md ModelClipmAPFPSweightYOWOv2-Nano1612.640ckptYOWOv2-Tiny...

编程日记 2023/12/10 4:02:27

5G常用简称

名称缩写全称非周期 信道状态信息参考信号aperidoc CSIAperidoc Channel State Information缓冲区状态报告BSRBuffer Status Report小区特定无线网络标识CS-RNTICell-Specific Radio Network Temporary Identifier主小区组MCGMaster Cell groupMCG的节点MNMasternode主小区PCel…...

编程日记 2023/12/10 4:01:27

自动化测试框架性能测试报告模板

一、项目概述 1.1 编写目的 本次测试报告&#xff0c;为自动化测试框架性能测试总结报告。目的在于总结我们课程所压测的目标系统的性能点、优化历史和可优化方向。 1.2 项目背景 我们公开课的性能测试目标系统。主要是用于我们课程自动化测试框架功能的实现&#xff0c;以及…...

编程日记 2023/12/10 3:58:25

【SpringBoot】解析Springboot事件机制，事件发布和监听

解析Springboot事件机制&#xff0c;事件发布和监听 一、Spring的事件是什么二、使用步骤2.1 依赖处理2.2 定义事件实体类2.3 定义事件监听类2.4 事件发布 三、异步调用3.1 启用异步调用3.2 监听器方法上添加 Async 注解 一、Spring的事件是什么 Spring的事件监听&#xff08;…...

编程日记 2023/12/10 3:54:22

华为ensp实验——基于全局地址池的DHCP组网实验

目录 前言实验目的实验内容实验结果 前言 该实验基于华为ensp&#xff0c;版本号是1.3.00.100 V100R003C00SPC100&#xff0c;只供学习和参考&#xff0c;不作任何商业用途。 具体的DHCP命令可以看系列文章链接&#xff0c;计算机网络实验&#xff08;华为eNSP模拟器&#xff…...

编程日记 2023/12/10 3:51:19

如何选择一款安全可靠的跨网安全数据交换系统？

随着网络和数据安全的重视程度增加&#xff0c;为了有效地保护内部的核心数据资产&#xff0c;普遍会采用内外网隔离的策略。像国内的政府机构、金融、能源电力、航空航天、医院等关乎国计民生的行业和领域均已进行了网络的隔离&#xff0c;将内部划分成不同的网段&#xff0c;…...

编程日记 2023/12/10 3:43:11

基于c++版本的数据结构改-python栈和队列思维总结

##栈部分-&#xff08;叠猫猫&#xff09; ##抽象数据类型栈的定义&#xff1a;是一种遵循先入后出的逻辑的线性数据结构。 换种方式去理解这种数据结构如果我们在一摞盘子中取到下面的盘子&#xff0c;我们首先要把最上面的盘子依次拿走&#xff0c;才可以继续拿下面的盘子&…...

编程日记 2023/12/10 3:39:08

算法通关村第七关—迭代实现二叉树的遍历(黄金)

迭代实现二叉树的遍历 迭代法实现前序遍历 前序遍历是中左右&#xff0c;如果还有左子树就一直向下找。完了之后再返回从最底层逐步向上向右找。不难写出如下代码&#xff1a;&#xff08;注意代码中&#xff0c;空节点不入栈&#xff09; public List<Integer>preorde…...

编程日记 2023/12/10 3:34:05

Java期末复习题之封装

点击返回标题->23年Java期末复习-CSDN博客 第1题. 定义一个类Person,定义name和age私有属性&#xff0c;定义有参的构造方法对name和age进行初始化。在测试类中创建该类的2个对象&#xff0c;姓名、年龄分别为lili、19和lucy、20&#xff0c;在屏幕打印出2个对象的姓名和年龄…...

编程日记 2023/12/10 3:33:04

湖科大计网：计算机网络概述

一、计算机网络的性能指标 一、速率 有时候数据量也认为是以10为底的&#xff0c;看怎么好算。&#xff08;具体吉大考试用什么待商榷&#xff09; 二、带宽 在模拟信号系统中带宽的含义&#xff0c;本课程中用到的地方是&#xff1a;香农定理和奈奎斯特定理公式的应用之中。 …...

编程日记 2023/12/10 3:32:01

每日一道c语言

任务描述 题目描述:输入10个互不相同的整数并保存在数组中&#xff0c;找到该最大元素并删除它&#xff0c;输出删除后的数组 相关知识&#xff08;略&#xff09; 编程要求 请仔细阅读右侧代码&#xff0c;结合相关知识&#xff0c;在Begin-End区域内进行代码补充&#xf…...

编程日记 2023/12/10 3:31:01

（C）一些题11

1. #include<stdio.h> #include<string.h> void main() { char *s1"ABCDEF"&#xff0c;*s2"aB"&#xff1b; s1; s2; puts(s1)&#xff1b; puts(s2)&#xff1b; printf("%d\n",strcmp(s1,s2))&#xff1b; } 答案&#xff1…...

编程日记 2023/12/10 3:27:56

多级路由component页面不加载

项目基于vue-element-admin 新建SubView.vue <template><router-view /> </template><script setup> </script>在父层添加component {path: /sj,component: Layout,redirect: /sj,name: 三级医院评审标准(2022),meta: {title: 三级医院评审标准(…...

编程日记 2023/12/10 3:24:54

【原创】Mac mini M1安装home-brew

Mac mini M1 所需神器 home-brew 按照官网的脚本无法安装。 无奈&#xff0c;从github下载安装包来安装。 Homebrew 结果&#xff0c;还需要先安装 Xcode command 命令行工具 xcode-select --install安装完了&#xff0c;却无法执行。 修改配置文件 cd vi .zshrc添加如下内…...

编程日记 2023/12/10 3:20:50

【python交互界面】实现动态观察图像在给定HSV范围的区域显示

HSV颜色空间 与RGB颜色空间相比&#xff0c;HSV颜色空间更适合进行颜色分析和提取特定颜色的目标。在HSV空间中&#xff0c;颜色信息被分布在不同的通道上&#xff0c;使我们能够更准确地定义颜色的范围&#xff0c;并使用阈值操作轻松地分离出我们感兴趣的区域部分。 HSV三个通…...

编程日记 2023/12/10 3:18:49

Vue3中定义变量是选择ref还是reactive？

目录 ref和reactive的优势 1. ref 优势&#xff1a; 应用场景&#xff1a; 示例&#xff1a; 2. reactive 优势&#xff1a; 应用场景&#xff1a; 示例&#xff1a; ref和reactive的劣势 1. ref 2. reactive 应用案例 总结 Vue3中定义变量可以选择使用ref或reac…...

编程日记 2023/12/10 3:17:48

数据结构 | 查漏补缺之哈希表、最短路径、二叉树与森林的转换

哈希表是什么&#xff1f; 或者说 设图采用邻接表的存储结构&#xff0c;写对图的删除顶点和删除边的算法步骤 删除边 删除点 最短路径问题 参考博文 迪杰斯特拉(Dijkstra)算法_dijkstra算法-CSDN博客 Dijkstra(迪杰斯特拉&#xff09;算法 定义一个点为源点&#xff0c;算源…...

编程日记 2023/12/10 3:16:46

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

编程新知 2025/7/7 0:24:14

高考志愿填报管理系统---开发介绍

高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发&#xff0c;采用现代化的Web技术&#xff0c;为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## &#x1f4cb; 系统概述 ### &#x1f3af; 系统定…...

编程新知 2025/7/7 10:03:33

Pydantic + Function Calling的结合

1、Pydantic Pydantic 是一个 Python 库&#xff0c;用于数据验证和设置管理&#xff0c;通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发&#xff08;如 FastAPI&#xff09;、配置管理和数据解析&#xff0c;核心功能包括&#xff1a; 数据验证&#xff1a;通过…...

编程新知 2025/7/4 5:24:44

规则与人性的天平——由高考迟到事件引发的思考

当那位身着校服的考生在考场关闭1分钟后狂奔而至&#xff0c;他涨红的脸上写满绝望。铁门内秒针划过的弧度&#xff0c;成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定"&#xff0c;构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...

编程新知 2025/7/7 1:06:16

算法刷题-回溯

今天给大家分享的还是一道关于dfs回溯的问题&#xff0c;对于这类问题大家还是要多刷和总结&#xff0c;总体难度还是偏大。 对于回溯问题有几个关键点&#xff1a; 1.首先对于这类回溯可以节点可以随机选择的问题&#xff0c;要做mian函数中循环调用dfs&#xff08;i&#x…...

编程新知 2025/7/7 1:53:54

中科院1区顶刊|IF14+：多组学MR联合单细胞时空分析，锁定心血管代谢疾病的免疫治疗新靶点

中科院1区顶刊|IF14&#xff1a;多组学MR联合单细胞时空分析&#xff0c;锁定心血管代谢疾病的免疫治疗新靶点 当下&#xff0c;免疫与代谢性疾病的关联研究已成为生命科学领域的前沿热点。随着研究的深入&#xff0c;我们愈发清晰地认识到免疫系统与代谢系统之间存在着极为复…...

编程新知 2025/7/7 5:04:53

Python网页自动化测试，DrissonPage库入门说明文档

&#x1f6f0;️ 基本逻辑​ 操作浏览器的基本逻辑如下&#xff1a; 创建浏览器对象&#xff0c;用于启动或接管浏览器获取一个 Tab 对象使用 Tab 对象访问网址使用 Tab 对象获取标签页内需要的元素对象使用元素对象进行交互 除此以外&#xff0c;还能执行更为复杂的操作&am…...

编程新知 2025/7/6 4:37:14

设计模式-观察着模式

观察者模式 观察者模式 (Observer Pattern) 是一种行为型设计模式&#xff0c;它定义了对象之间一种一对多的依赖关系&#xff0c;当一个对象&#xff08;称为主题或可观察者&#xff09;的状态发生改变时&#xff0c;所有依赖于它的对象&#xff08;称为观察者&#xff09;都…...

编程新知 2025/7/6 5:37:34

【电路笔记】-变压器电压调节

变压器电压调节 文章目录 变压器电压调节1、概述2、变压器电压调节3、变压器电压调节示例14、变压器电压调节示例25、变压器电压调节示例36、总结变压器电压调节是变压器输出端电压因连接负载电流的变化而从其空载值向上或向下变化的比率或百分比值。 1、概述 电压调节是衡量变…...

编程新知 2025/7/6 23:28:00

【前端】vue3性能优化方案

以下是Vue 3性能优化的系统性方案&#xff0c;结合核心优化策略与实用技巧&#xff0c;覆盖渲染、响应式、加载、代码等多个维度&#xff1a; ⚙️ 一、渲染优化 精准控制渲染范围 v-if vs v-show&#xff1a; v-if&#xff1a;条件为假时销毁DOM&#xff0c;适合低频切换场景&…...

编程新知 2025/7/6 15:57:07