springboot + springsecurity + mybatis + mysql实现用户登录验证，记住密码，退出功能_springboot+springsession+mysql

springsecurity 主要的功能是 验证 和 授权。springsecurity主要的工作原理是：
当我们在登录页面中输入用户名和密码之后首先会进入到UsernamePasswordAuthenticationToken验证(Authentication)，然后生成的Authentication会被交由AuthenticationManager来进行管理而AuthenticationManager管理一系列的AuthenticationProvider，而每一个Provider都会通UserDetailsService和UserDetail来返回一个以UsernamePasswordAuthenticationToken实现的带用户名和密码以及权限的Authentication
 

springsecurity 会为我们自动生成一个登录界面，不过这个界面有点丑，当然我们也可以自己定义登录界面。

在pom.xml中引入各种jar包就不再赘述，mybatis的配置和mapring的编写也省略，主要讲述springsecurity 的配置。

WebSecurityConfigurerAdapter

首先我们需要自定义一个类来继承WebSecurityConfigurerAdapter，并且在类上加上注解，在该类中重写configure方法来实现自定义拦截方法和请求UserDetailsService。具体代码如下：
 

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    @Bean
    UserDetailsService customUserService() { // 注册UserDetailsService 的bean
        return new CustomUserDetailsService();
    }
    @Bean
    public static NoOpPasswordEncoder passwordEncoder() {
        return (NoOpPasswordEncoder) NoOpPasswordEncoder.getInstance();
    }
    @Override
    //重写configure(HttpSecurity http)的方法，这里面来自定义自己的拦截方法和业务逻辑
    protected void configure(HttpSecurity httpSecurity) throws Exception {
        System.out.println("用到一！！");
        httpSecurity.authorizeRequests()
                .antMatchers("/js/**","/css/**","/images/*","/fonts/**","/**/*.png","/**/*.jpg").permitAll()
                .antMatchers("/","/login","/signin").permitAll()
                .anyRequest().authenticated()
                .and()
                .formLogin()
                .loginPage("/login")
                .failureUrl("/login?error")
                .defaultSuccessUrl("/home")
                .permitAll()
                .and()
                .rememberMe().rememberMeParameter("remember-me") //其实默认就是remember-me，这里可以指定更换
                .and()
                .logout()
                .logoutSuccessUrl("/login?logout")  //退出登录
                .permitAll()
                .and()
                .csrf().disable();
 
    }
    @Override
    public void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(customUserService()).passwordEncoder(passwordEncoder());
    }
}

该函数的作用是实现密码的加密，在springsecurity5.0版本之后，如果不对密码进行passwordEncoder，会抛出There is no PasswordEncoder mapped for the id "null"异常。解决方法是

 

1. 在securityConfig类下加入NoOpPasswordEncoder，不过官方已经不推荐了

    @Bean
    public static NoOpPasswordEncoder passwordEncoder() {
        return (NoOpPasswordEncoder) NoOpPasswordEncoder.getInstance();
    }

1. 在securityConfig类下加入密码加密,在数据库中存的密码也是要经过这个加密的才能匹配上

 

 @Autowired
    private UserDetailsService customUserService;
 
    @Override
    public void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(customUserService).passwordEncoder(new BCryptPasswordEncoder());
    }

UserDetailsService

springsecurity在请求完WebSecurityConfigurerAdapter会请求UserDetailsService，所以我们要再自定义一个类实现UserDetailsService接口，该类主要用来进行用户名密码的验证和用户的授权。具体代码如下

@Service
public class CustomUserDetailsService implements UserDetailsService {
    @Autowired
    UserService userService;
    @Autowired
    HttpServletRequest request;
    @Override
    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
        User user = userService.selectUser(username);
        System.out.println(user.getUsername());
        if (user == null){
            throw new UsernameNotFoundException("用户名不存在!");
        }
        HttpSession session = request.getSession();
        session.setAttribute("user",user);
        session.setAttribute("sessusername",username);
        List<SimpleGrantedAuthority> authorities = new ArrayList<>();
//        for (Role role:user.getRoles()) {
//            authorities.add(new SimpleGrantedAuthority(role.getName()));
//        }
        authorities.add(new SimpleGrantedAuthority("ROLE_USER"));
        System.out.println(user.getUsername()+authorities.toString());
        return new org.springframework.security.core.userdetails.User(user.getUsername(),user.getPwd(),authorities);
    }
}

该类中我是直接把所有的用户赋予了ROLE_USER权限，即普通用户。

 

login.html

下面我们自定义登录界面。具体代码如下

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="layout">
<head>
    <title>用户登录</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 
    <link th:href="@{css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{css/style.css}" rel="stylesheet">
    <link th:href="@{css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{css/bootstrap-theme.min.css}" rel="stylesheet">
    <link th:href="@{css/templatemo_style.css}" rel="stylesheet">
    <link th:href="@{css/font-awesome.min.css}" rel="stylesheet">
    <script th:src="@{js/login.js}" type="text/javascript"></script>
    <script th:src="@{js/jquery-1.11.1.min.js}" type="text/javascript"></script>
</head>
<body >
<!-- header -->
<div class="header_top">
    <div class="container">
        <div class="header_top_left">
            <ul>
                <li>&copy; 全景NBA</li>
            </ul>
        </div>
        <div class="header_top_right">
            欢迎您,
            <form th:action="@{/logout}" method="post">
                <input th:if="${param.logout}" type="submit"  name="logout" value="退出" class="btn btn-danger" >
            </form>
        </div>
        <div class="clearfix"> </div>
    </div>
</div>
<div class="logo_social_icons">
    <div class="container">
        <div class="logo">
            <h1><a href="index.html"><img th:src="@{images/logo.jpg}" alt=" " class="img-responsive" /></a></h1>
        </div>
        <div class="social_icons">
            <div class="component">
                <a href="#" class="icon icon-cube facebook"></a>
                <a href="#" class="icon icon-cube rss"></a>
                <a href="#" class="icon icon-cube instagram"></a>
                <a href="#" class="icon icon-cube t"></a>
                <div class="clearfix"> </div>
            </div>
        </div>
        <div class="clearfix"> </div>
    </div>
</div>
<div class="header">
    <div class="container">
        <nav class="navbar navbar-default">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
 
 
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
                <nav class="stroke">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="/signin" target="_top" class="hvr-bounce-to-bottom">注 册</a></li>
                        <li><a href="/login" target="_top" class="hvr-bounce-to-bottom">登 录</a></li>
 
 
 
 
                    </ul>
                    <div class="search-box">
                        <div id="sb-search" class="sb-search">
                            <form>
                                <input class="sb-search-input" placeholder="Enter your search term..." type="search" id="search">
                                <input class="sb-search-submit" type="submit" value="">
                                <span class="sb-icon-search"> </span>
                            </form>
                        </div>
                    </div>
                    <!-- search-scripts -->
                    <script th:src="@{js/classie.js}" type="text/javascript"></script>
                    <script th:src="@{js/uisearch.js}" type="text/javascript"></script>
                    <script>
                        new UISearch( document.getElementById( 'sb-search' ) );
                    </script>
                    <!-- //search-scripts -->
                </nav>
            </div>
            <!-- /.navbar-collapse -->
        </nav>
    </div>
</div>
<script th:src="@{js/bootstrap.js}" type="text/javascript"></script>
<!-- //for bootstrap working -->
 
 
<div class="center-block" style="width:200px" th:if="${status}!=null">
    <p th:text="${status}" class="bg-danger"></p>
</div>
 
 
<div class="center-block" style="width:200px" >
    <!-- <p th:if="${param.error}"  class="bg-danger"></p> -->
    <p th:if="${param.logout}"  class="bg-danger">您已成功退出</p>
</div>
<div class="templatemo-bg-gray">
<div class="container">
        <div class="col-md-12">
            <h1 class="margin-bottom-15">登录</h1>
            <form class="form-horizontal templatemo-container templatemo-login-form-1 margin-bottom-30" role="form" action="/login" method="post" name="form1" id="form1">
                <div class="form-group">
                  <div class="col-xs-12">                    
                    <div class="control-wrapper">
                        <label  class="control-label fa-label"><i class="fa fa-user fa-medium"></i></label>
                        <input type="text" name="username" id="email" class="form-control" οnfοcus="emailFocus()" οnblur="emailBlur()" placeholder="请输入用户名" >
                        <div id="email_prompt" style="width:260px;color:red;"> </div>
                    </div>                                    
                  </div>              
                </div>
                <div class="form-group">
                  <div class="col-md-12">
                      <div class="control-wrapper">
                        <label for="password" class="control-label fa-label"><i class="fa fa-lock fa-medium"></i></label>
                        <input type="password" name="password" class="form-control" id="password" οnfοcus="pwdFocus()" οnblur="pwdBlur()" placeholder="请输入密码">
                        <div id="password_prompt" style="width:260px;color:red;"></div>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-md-12">
                     <div class="checkbox control-wrapper">
                        <label>
                              <input name="remember-me" id="remember-me" type="checkbox"> 记住密码
                        </label>
                      </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-md-12">
                      <div class="control-wrapper">
                          <input type="submit"  name="submit" value="登录" class="btn btn-info" >
                          <a href="forgot-password.html" class="text-right pull-right">忘记密码?</a>
                      </div>
                  </div>
                </div>
                <hr>
                <div class="form-group">
                    <div class="col-md-12">
                        <label>第三方登录: </label>
                        <div class="inline-block">
                            <a href="#"><i class="fa fa-facebook-square login-with"></i></a>
                            <a href="#"><i class="fa fa-twitter-square login-with"></i></a>
                            <a href="#"><i class="fa fa-google-plus-square login-with"></i></a>
                            <a href="#"><i class="fa fa-tumblr-square login-with"></i></a>
                            <a href="#"><i class="fa fa-github-square login-with"></i></a>
                        </div>                        
                    </div>
                </div>
              </form>
              <div class="text-center">
                  <a href="/signin" class="templatemo-create-new">注册 <i class="fa fa-arrow-circle-o-right"></i></a>
              </div>
        </div>
    </div>
</div>
 
</body>
</html>

 

***************************************

 

  xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="layout">
<head>
    <title>用户登录</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link th:href="@{css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{css/style.css}" rel="stylesheet">
    <link th:href="@{css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{css/bootstrap-theme.min.css}" rel="stylesheet">
    <link th:href="@{css/templatemo_style.css}" rel="stylesheet">
    <link th:href="@{css/font-awesome.min.css}" rel="stylesheet">
    <script th:src="@{js/login.js}" type="text/javascript"></script>
    <script th:src="@{js/jquery-1.11.1.min.js}" type="text/javascript"></script>
</head>
<body >
<!-- header -->
<div class="header_top">
    <div class="container">
        <div class="header_top_left">
            <ul>
                <li>&copy; 全景NBA</li>
            </ul>
        </div>
        <div class="header_top_right">
            欢迎您,
            <form th:action="@{/logout}" method="post">
                <input th:if="${param.logout}" type="submit"  name="logout" value="退出" class="btn btn-danger" >
            </form>
        </div>
        <div class="clearfix"> </div>
    </div>
</div>
<div class="logo_social_icons">
    <div class="container">
        <div class="logo">
            <h1><a href="index.html"><img th:src="@{images/logo.jpg}" alt=" " class="img-responsive" /></a></h1>
        </div>
        <div class="social_icons">
            <div class="component">
                <a href="#" class="icon icon-cube facebook"></a>
                <a href="#" class="icon icon-cube rss"></a>
                <a href="#" class="icon icon-cube instagram"></a>
                <a href="#" class="icon icon-cube t"></a>
                <div class="clearfix"> </div>
            </div>
        </div>
        <div class="clearfix"> </div>
    </div>
</div>
<div class="header">
    <div class="container">
        <nav class="navbar navbar-default">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
                <nav class="stroke">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="/signin" target="_top" class="hvr-bounce-to-bottom">注 册</a></li>
                        <li><a href="/login" target="_top" class="hvr-bounce-to-bottom">登 录</a></li>

                    </ul>
                    <div class="search-box">
                        <div id="sb-search" class="sb-search">
                            <form>
                                <input class="sb-search-input" placeholder="Enter your search term..." type="search" id="search">
                                <input class="sb-search-submit" type="submit" value="">
                                <span class="sb-icon-search"> </span>
                            </form>
                        </div>
                    </div>
                    <!-- search-scripts -->
                    <script th:src="@{js/classie.js}" type="text/javascript"></script>
                    <script th:src="@{js/uisearch.js}" type="text/javascript"></script>
                    <script>
                        new UISearch( document.getElementById( 'sb-search' ) );
                    </script>
                    <!-- //search-scripts -->
                </nav>
            </div>
            <!-- /.navbar-collapse -->
        </nav>
    </div>
</div>
<script th:src="@{js/bootstrap.js}" type="text/javascript"></script>
<!-- //for bootstrap working -->

<div class="center-block" style="width:200px" th:if="${status}!=null">
    <p th:text="${status}" class="bg-danger"></p>
</div>

<div class="center-block" style="width:200px" >
    <!-- <p th:if="${param.error}"  class="bg-danger"></p> -->
    <p th:if="${param.logout}"  class="bg-danger">您已成功退出</p>
</div>
<div class="templatemo-bg-gray">
<div class="container">
        <div class="col-md-12">
            <h1 class="margin-bottom-15">登录</h1>
            <form class="form-horizontal templatemo-container templatemo-login-form-1 margin-bottom-30" role="form" action="/login" method="post" name="form1" id="form1">
                <div class="form-group">
                  <div class="col-xs-12">                    
                    <div class="control-wrapper">
                        <label  class="control-label fa-label"><i class="fa fa-user fa-medium"></i></label>
                        <input type="text" name="username" id="email" class="form-control" οnfοcus="emailFocus()" οnblur="emailBlur()" placeholder="请输入用户名" >
                        <div id="email_prompt" style="width:260px;color:red;"> </div>
                    </div>                                    
                  </div>              
                </div>
                <div class="form-group">
                  <div class="col-md-12">
                      <div class="control-wrapper">
                        <label for="password" class="control-label fa-label"><i class="fa fa-lock fa-medium"></i></label>
                        <input type="password" name="password" class="form-control" id="password" οnfοcus="pwdFocus()" οnblur="pwdBlur()" placeholder="请输入密码">
                        <div id="password_prompt" style="width:260px;color:red;"></div>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-md-12">
                     <div class="checkbox control-wrapper">
                        <label>
                              <input name="remember-me" id="remember-me" type="checkbox"> 记住密码
                        </label>
                      </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-md-12">
                      <div class="control-wrapper">
                          <input type="submit"  name="submit" value="登录" class="btn btn-info" >
                          <a href="forgot-password.html" class="text-right pull-right">忘记密码?</a>
                      </div>
                  </div>
                </div>
                <hr>
                <div class="form-group">
                    <div class="col-md-12">
                        <label>第三方登录: </label>
                        <div class="inline-block">
                            <a href="#"><i class="fa fa-facebook-square login-with"></i></a>
                            <a href="#"><i class="fa fa-twitter-square login-with"></i></a>
                            <a href="#"><i class="fa fa-google-plus-square login-with"></i></a>
                            <a href="#"><i class="fa fa-tumblr-square login-with"></i></a>
                            <a href="#"><i class="fa fa-github-square login-with"></i></a>
                        </div>                        
                    </div>
                </div>
              </form>
              <div class="text-center">
                  <a href="/signin" class="templatemo-create-new">注册 <i class="fa fa-arrow-circle-o-right"></i></a>
              </div>
        </div>
    </div>
</div>

</body>
</html>

 

注意用户名输入框input的name属性一定要为username，密码输入框input的name属性一定要为password，与security一致。

按钮的type为submit，并且，form表单的action的值一定要和WebSecurityConfigurerAdapter中的loginPage中的值一致！！我给的是/login。这样，当输入用户名和密码，点击登录后便会提交给security验证。

记住密码的checkbox的name属性也要与WebSecurityConfigurerAdapter中的rememberme的值相同。

退出登录的表单的action要为/logout。

具体请求过程为

用户访问资源→security拦截→跳转到login→提交表单→securityProvider处理用户信息→借助UserDetailsService 获取用户信息→认证成功/失败

原文：https://blog.csdn.net/wanderlustLee/article/details/80032177