Spring Security--自定义登录页面

书接上文，我们已经连接了数据库，用数据库的账号密码进行了登录。

但是呢，我们少了一个登录的页面，显得不是那么美观。

随便在网上搜索一个html的登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .container {
            height: 100%;
            background-image: linear-gradient(to right, #999999, #330867);
        }
        .login-wrapper {
            background-color: bisque;
            width: 358px;
            height: 588px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .header {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
        }
        .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128,125,125);
            font-size: 15px;
            outline: none;
        }
        .input-item::placeholder {
            text-transform: uppercase;
        }
        .btn {
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 40px;
            background-image: linear-gradient(to right,#a6c1ee, #fbc2eb);
            color: #fff;
        }
        .msg {
            text-align: center;
            line-height: 88px;
        }
        a {
            text-decoration-line: none;
            color: #abc1ee;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="login-wrapper">
            <div class="header">Login</div>
            <div class="form-wrapper">
                <input type="text" name="username" placeholder="username" class="input-item">
                <input type="password" name="password" placeholder="password" class="input-item">
                <div class="btn">Login</div>
            </div>
            <div class="msg">
                Don't have account?
                <a href="#">Sign up</a>
            </div>
        </div>
    </div>
</body>
</html>

复制到static目录下，

简单修改一下

<body>

<div class="container">
    <div class="login-wrapper">
        <div class="header">Login</div>
        <div class="form-wrapper">
            <form action="/doLogin" method="post">
            <input type="text" name="username" placeholder="username" class="input-item">
            <input type="password" name="password" placeholder="password" class="input-item">
            <button type="submit" class="btn">登录</button>
            </form>
        </div>
        <div class="msg">
           没有账号
            <a href="#">Sign up</a>
        </div>
    </div>
</div>

</body>

下面是security的配置类

package org.ikun.security_demo;


import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.builders.WebSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

@Configuration
@EnableWebSecurity
public class SpringSecurityConfig extends WebSecurityConfigurerAdapter {


    @Override
    protected void configure(HttpSecurity http) throws Exception {
        //开始认证
        //设置登录,注销，表单登录不用拦截，其他请求要拦截
        http.authorizeRequests().antMatchers("/","/login.html").anonymous()
                //所有的请求，类似于shiro中的 /**
                .anyRequest()
                //必须要认证之后才能访问，类似于shiro的authc
                .authenticated()
                .and()
                //开始配置登录表单
                .formLogin()
                //配置登录页面，如果访问了一个需要登录以后才能访问的页面，那么就会自动登录到这个页面
                .loginPage("/login.html")
                //配置处理登录请求的接口,其实就是配置了过滤器里的拦截规则，将来的登录请求就会在过滤器中被处理
                .loginProcessingUrl("/doLogin")
                //配置登录表单中用户名的 key
                .usernameParameter("username")
                //配置登录表单中的密码 默认也是username 和 password
                .passwordParameter("password")
                //配置登录成功后访问的接口
                .defaultSuccessUrl("/hello")
                //登录失败后访问的接口
                .failureUrl("/login.html")
                //关闭默认的csrf认证
                .and().csrf().disable();

    }

    @Override
    public void configure(WebSecurity web) throws Exception {
        //设置静态资源不要拦截
        web.ignoring().antMatchers("/js/**","/css/**","/images/**");
    }
}

整个的目录结构如下

运行效果如图

登录成功后访问/hello接口，登录失败回到登录页面

Spring Security--自定义登录页面

猜你喜欢