文章目录
- 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. 执行流程
本文接下来介绍的案例代码,大体执行流程:
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
@Beanpublic 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 {@GetMappingpublic String login() {return "login";}
}
分别再创建两个用于测试的请求 API
IndexController.java
@Controller
@RequestMapping("index")
public class IndexController {@GetMappingpublic String index(Model model) {model.addAttribute("msg", "Welcome to Koala System.");return "index";}
}
UserController.java
@Controller
@RequestMapping("user")
public class UserController {@GetMappingpublic 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 的登录画面,并且设定了一个登录成功的默认请求。这里只是一个简单的例子,在实际开发中还是需要根据具体需求来设定,都是大同小异,根据需求自由发挥即可。