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

文章目录

    • 1. 执行流程
    • 2. 为什么要自定义登录页面
    • 3. 创建登录页面
    • 4. 配置 Spring Security
    • 5. 创建请求 API
    • 6. 启动服务
    • 7. 验证
    • 8. 代码详细
    • 总结

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

关联文章

【Spring实战】10 Security 入门

【Spring实战】11 Security 常用配置

【Spring实战】12 Thymeleaf


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

1. 执行流程

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

【Spring实战】13 Security+Thymeleaf自定义登录页面_第1张图片

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

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

自带的长这样

【Spring实战】13 Security+Thymeleaf自定义登录页面_第2张图片

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 Pagetitle>
    <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 Systemh3>
                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">Loginbutton>
                    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. 启动服务

【Spring实战】13 Security+Thymeleaf自定义登录页面_第3张图片

7. 验证

首先,我们访问 user 的 URL

http://localhost:8080/user

【Spring实战】13 Security+Thymeleaf自定义登录页面_第4张图片

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

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

【Spring实战】13 Security+Thymeleaf自定义登录页面_第5张图片

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

在这里插入图片描述

8. 代码详细

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

【Spring实战】13 Security+Thymeleaf自定义登录页面_第6张图片

总结

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

你可能感兴趣的:(Spring实战,spring,java,后端,html)