springboot + springsecurity + mybatis + 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());
    }
}

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

该函数的作用是实现密码的加密,在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" onfocus="emailFocus()" onblur="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" onfocus="pwdFocus()" onblur="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 获取用户信息→认证成功/失败

猜你喜欢

转载自blog.csdn.net/wanderlustlee/article/details/80032177