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

忘是亡心i 2022-02-28 10:22 279阅读 0赞

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

![70][]

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 >  
  
<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">  
              
            <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>  
   
   
              
            <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>  
                      
                    <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>  
                      
                </nav>  
            </div>  
              
        </nav>  
    </div>  
</div>  
<script th:src="@\{js/bootstrap.js\}" type="text/javascript"></script>  
  
   
   
<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.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">

<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>  
                      
                    <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>  
                      
                </nav>  
            </div>  
              
        </nav>  
    </div>  
</div>  
<script th:src="@\{js/bootstrap.js\}" type="text/javascript"></script>

<div class="center-block" style="width:200px" >  
      
    <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

[70]: /images/20220228/ce9bd369ebe44e9f8e97dc763631c90e.png