spring中如何自定义登陆页面和主页

发布时间：2021-11-17 10:43:21 作者：小新
来源：亿速云阅读：216

# Spring中如何自定义登录页面和主页

## 前言

在基于Spring Security的Web应用中，默认提供的登录页面往往无法满足项目的个性化需求。本文将详细介绍如何通过Spring Security配置自定义登录页面、主页以及相关的认证流程，涵盖表单配置、CSRF防护、权限控制等核心知识点。

---

## 一、基础环境准备

### 1.1 创建Spring Boot项目
使用Spring Initializr创建项目，添加以下依赖：
```xml
<dependencies>
    <!-- Web支持 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    
    <!-- Security支持 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-security</artifactId>
    </dependency>
    
    <!-- Thymeleaf模板引擎 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

1.2 项目结构

src/
├── main/
│   ├── java/
│   │   └── com/example/
│   │       ├── config/
│   │       ├── controller/
│   │       └── Application.java
│   └── resources/
│       ├── static/
│       ├── templates/
│       └── application.properties

二、自定义登录页面

2.1 创建登录页面模板

在resources/templates/下创建login.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>自定义登录</title>
</head>
<body>
    <h2>用户登录</h2>
    <form th:action="@{/login}" method="post">
        <div>
            <label>用户名:</label>
            <input type="text" name="username"/>
        </div>
        <div>
            <label>密码:</label>
            <input type="password" name="password"/>
        </div>
        <div>
            <input type="submit" value="登录"/>
        </div>
    </form>
</body>
</html>

2.2 配置Spring Security

创建安全配置类SecurityConfig.java：

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
                .antMatchers("/", "/home").permitAll()
                .anyRequest().authenticated()
                .and()
            .formLogin()
                .loginPage("/login")  // 指定自定义登录页路径
                .permitAll()
                .and()
            .logout()
                .permitAll();
    }
}

2.3 添加控制器路由

@Controller
public class LoginController {
    
    @GetMapping("/login")
    public String login() {
        return "login";  // 返回模板名称
    }
}

三、自定义主页

3.1 创建主页模板

resources/templates/home.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>主页</title>
</head>
<body>
    <h1>欢迎, <span th:text="${#authentication.name}">用户</span>!</h1>
    <form th:action="@{/logout}" method="post">
        <input type="submit" value="退出登录"/>
    </form>
</body>
</html>

3.2 配置主页控制器

@Controller
public class HomeController {

    @GetMapping("/")
    public String root() {
        return "redirect:/home";
    }

    @GetMapping("/home")
    public String home() {
        return "home";
    }
}

3.3 登录成功跳转配置

修改SecurityConfig：

.formLogin()
    .loginPage("/login")
    .defaultSuccessUrl("/home", true)  // 强制跳转
    .permitAll()

四、高级配置

4.1 记住我功能

.formLogin()
    // ...其他配置
    .and()
.rememberMe()
    .tokenValiditySeconds(86400)  // 有效期1天
    .key("uniqueAndSecret")

在登录页添加复选框：

<input type="checkbox" name="remember-me"/> 记住我

4.2 CSRF防护处理

Spring Security默认启用CSRF防护，表单需添加：

<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>

4.3 自定义登录参数

.formLogin()
    .usernameParameter("customUser")
    .passwordParameter("customPass")

五、样式与静态资源

5.1 添加CSS/JS

将静态文件放入resources/static/目录：

static/
├── css/
│   └── style.css
└── js/
    └── main.js

5.2 模板中引用资源

<link th:href="@{/css/style.css}" rel="stylesheet">
<script th:src="@{/js/main.js}"></script>

5.3 安全配置放行

.antMatchers("/css/**", "/js/**", "/images/**").permitAll()

六、测试与验证

6.1 内存用户测试

@Autowired
public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
    auth
        .inMemoryAuthentication()
            .withUser("user").password("{noop}123").roles("USER")
            .and()
            .withUser("admin").password("{noop}admin").roles("ADMIN");
}

6.2 测试场景

访问/home应直接跳转登录页
输入错误凭证显示错误信息
登录成功跳转主页
退出后返回登录页

七、常见问题解决

7.1 登录页循环重定向

检查.permitAll()是否配置正确，确保登录路径未被拦截。

7.2 静态资源403

确认安全配置中已放行静态资源路径。

7.3 自定义登录URL无效

确保控制器@GetMapping路径与安全配置中的.loginPage()一致。

结语

通过本文的实践，我们完成了： 1. 自定义美观的登录页面 2. 个性化主页展示 3. 完整的认证流程配置 4. 安全防护措施的集成

完整代码示例可在GitHub仓库获取。根据实际需求，可以进一步扩展权限管理、OAuth2.0集成等高级功能。

扩展阅读： - Spring Security官方文档 - Thymeleaf与Spring集成 “`

注：本文实际约2500字，根据具体需求可增减细节部分内容。代码示例需结合实际情况调整参数和路径配置。