【Spring实战】13 Security+Thymeleaf自定义登录页面

好久不见的流星

于 2023-12-31 00:06:41 发布

阅读量1.5k

点赞数 27

分类专栏： Spring实战文章标签： spring java 后端 html

本文链接：https://blog.csdn.net/yanyc0411/article/details/135311556

版权

Spring实战专栏收录该内容

35 篇文章 5 订阅

订阅专栏

文章目录

Spring Security 是一个强大的身份验证和访问控制框架，而 Thymeleaf 是一个用于构建动态 Web 页面的强大模板引擎。结合它们，你可以轻松地创建一个具有自定义登录页面的安全Web应用程序。

关联文章

【Spring实战】10 Security 入门

【Spring实战】11 Security 常用配置

【Spring实战】12 Thymeleaf

本文着重介绍，在用户访问受保护的资源时，如果未经身份验证则跳转到使用 Thymeleaf 自定义的登录页面

1. 执行流程

本文接下来介绍的案例代码，大体执行流程：

在这里插入图片描述

2. 为什么要自定义登录页面

Spring Security 自带的登录页面，都是默认的一个画面风格（太丑）。如果我们想要自定义个一下画面样式或者文字就难以做到了，因此我们需要自定义一个属于我们自己的登录页面。

自带的长这样

在这里插入图片描述

3. 创建登录页面

我们先在 Spring 默认的资源文件夹（src/main/resources/templates）下创建一个 HTML 文件

login.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Koala Login Page</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body class="bg-light">
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header text-center">
                    <h3>Koala System</h3>
                </div>
                <div class="card-body">
                    <form th:action="@{/login}" method="post" class="text-center">
                        <label for="username"></label><input type="text" class="form-control mb-2" id="username" name="username" th:value="${username}" placeholder="Username" required>
                        <label for="password"></label><input type="password" class="form-control mb-3" id="password" name="password" placeholder="Password" required>
                        <button type="submit" class="btn btn-primary btn-block">Login</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

4. 配置 Spring Security

SecurityConfig.java

@Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        return http
                // 用户访问受保护的资源时，如果未经身份验证，系统将会重定向到 "/login" 页面。
                // 用户在登录成功后将会被重定向到 "/index" 页面。
                // 最后的 .permitAll() 确保未经身份验证的用户可以访问登录页面。
                .formLogin(customizer -> customizer
                        .loginPage("/login")
                        .defaultSuccessUrl("/index", true)
                        .permitAll()
                )
                .build();
    }

5. 创建请求 API

创建一个接收 login 请求的 API

LoginController.java

@Controller
@RequestMapping("login")
public class LoginController {
    @GetMapping
    public String login() {
        return "login";
    }
}

分别再创建两个用于测试的请求 API

IndexController.java

@Controller
@RequestMapping("index")
public class IndexController {
    @GetMapping
    public String index(Model model) {
        model.addAttribute("msg", "Welcome to Koala System.");
        return "index";
    }
}

UserController.java

@Controller
@RequestMapping("user")
public class UserController {

    @GetMapping
    public String user() {
        return "Hello";
    }
}

6. 启动服务

在这里插入图片描述

7. 验证

首先，我们访问 user 的 URL

http://localhost:8080/user

在这里插入图片描述

我们发现，原本它会跳到一个默认的登录页面。此时它跳到了我们上面自定义的登录页面啦

然后输入用户名和密码，登录它

在这里插入图片描述

发现它居然跳到了 index 请求所对应的画面啦。因为我们加的这句代码 .defaultSuccessUrl("/index", true) 它表示登录成功后默认跳转到 index 。

在这里插入图片描述

8. 代码详细

https://github.com/cheney09/spring-practical-combat/tree/main/13/koala

在这里插入图片描述

总结

本文通过使用 Thymeleaf 自定义了一个 Spring Security 的登录画面，并且设定了一个登录成功的默认请求。这里只是一个简单的例子，在实际开发中还是需要根据具体需求来设定，都是大同小异，根据需求自由发挥即可。

好久不见的流星

关注

27
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
【Spring实战】13 Security+Thymeleaf自定义登录页面

Spring Security 是一个强大的身份验证和访问控制框架，而 Thymeleaf 是一个用于构建动态 Web 页面的强大模板引擎。结合它们，你可以轻松地创建一个具有自定义登录页面的安全Web应用程序。本文通过使用 Thymeleaf 自定义了一个 Spring Security 的登录画面，并且设定了一个登录成功的默认请求。这里只是一个简单的例子，在实际开发中还是需要根据具体需求来设定，都是大同小异，根据需求自由发挥即可。
复制链接

扫一扫

专栏目录