springsecurtiy自定义登录页面

2020-06-07  本文已影响0人  simplerandom
package com.security;

import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.authentication.configuration.AuthenticationConfiguration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;

@EnableWebSecurity
public class SercurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests().
//                test路径无需登陆也可以访问
        antMatchers("/test").authenticated().
//               /登录后需要yes权限才可以访问
        antMatchers("/").hasRole("yes").
//                test2路径需要登录后访问
        antMatchers("/test2").hasRole("root");
//        需要登录授权的路径自动跳转登录界面
        // usernameParameter("user")代表username=user
http.formLogin().loginPage("/mylogin").loginProcessingUrl("/login");
//访问/logout路径退出登录,退出成功跳转/login路径
        http.logout().logoutSuccessUrl("/mylogin");
//        关闭防攻击
        http.csrf().disable();
//        记住登录
        http.rememberMe();
    }

//    自定义在内存中的用户,密码,角色

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {

        auth.inMemoryAuthentication().passwordEncoder(new BCryptPasswordEncoder()).withUser("lee").password(new BCryptPasswordEncoder().encode("123")).roles("root", "guest").
                //下一个用户
                        and().
                withUser("guest").password(new BCryptPasswordEncoder().encode("123")).roles("guest");
    }
}

mylogin.ftl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="login-wrapper">
        <div class="header">Login</div>
        <div class="form-wrapper">
            <form action="/login" method="post">
                <input type="text" name="username" placeholder="username" class="input-item">
                <input type="password" name="password" placeholder="password" class="input-item">
                <input class="btn" type="submit" value="Login"/>
            </form>

        </div>
        <div class="msg">
            Don`t have account ? <a href="#">Sign up</a>
        </div>
    </div>
</div>
</body>
<style>
    *{
        padding: 0;
        margin: 0;
        ont-family: "Open Sans Light";
        letter-spacing: .05em;
    }
    html{
        height: 100%;
    }
    body{
        height: 100%;
    }
    .container{
        height: 100%;
        background-image: linear-gradient(to right,#fbc2eb,#a6c1ee);
    }
    .login-wrapper{
        background-color: #fff;
        width: 250px;
        height: 500px;
        border-radius: 15px;
        padding: 0 50px;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .login-wrapper .header{
        font-size: 30px;
        text-align: center;
        font-weight: bold;
        line-height: 200px;

    }
    .login-wrapper .form-wrapper .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;
    }
    .login-wrapper .form-wrapper .input-item::placeholder{
        text-transform: uppercase;
    }
    .login-wrapper .form-wrapper .btn{
        text-align: center;
        padding: 10px;
        width: 100%;
        margin-top: 40px;
        background-image: linear-gradient(to right, #a6c1ee,#fbc2eb);
        color: #fff;
    }
    .login-wrapper .msg{
        text-align: center;
        line-height: 88px;
    }
    .login-wrapper .msg a{
        text-decoration-line: none;
        color: #fbc2eb;
    }

</style>
</html>
上一篇 下一篇

猜你喜欢

热点阅读