SpringSecurity跟SpringBoot的整合-自定义登录页面
大爱同学
发表于
2020-03-21 05:56
3486
springsecurity
登录
权限
后台
RABC
SpringSecurity跟SpringBoot的整合-自定义登录页面
上一篇文章我们创建了项目
自定义了错误页面
登录方式
也写了测试的用户和角色
以及配置通过角色来限制请求
SpringSecurity跟SpringBoot的整合-项目创建
接下来我们看看如何自定义登录页面
自定义登录页面
我们上一篇文章配置了登录方式为form表单
其实我们还可以指定登录页面
@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
//拦截所有
.antMatchers("/manager").hasAuthority("admin")//admin 角色才可以访问
.antMatchers("/list").hasAuthority("register")//注册用户就可以访问
.antMatchers("/loginPage").permitAll()
.antMatchers("/login").permitAll()
.antMatchers("/**")
.fullyAuthenticated()
.and()
//.httpBasic();
.formLogin()
.loginPage("/loginPage")
.defaultSuccessUrl("/index")
.loginProcessingUrl("/login")
.and().csrf().disable();
}
注意点:
- .loginPage("/loginPage") 修改登录页面为这个,并且我们在controller里写了这个页面
- .antMatchers("/loginPage").permitAll(),要放行这个页面,否则会被死循环重定向
- 页面内容如下,要注意username password,以及post提交方式,还有默认登录提交路径为login
- .loginProcessingUrl("/login")跟html里的action对应
- 这里面直接disable掉了csrf
<html>
<head>
<title>登录界面</title>
<style>
.login-box {
width: 300px;
margin: 50px auto 0;
text-align: center;
}
.login-title {
margin-bottom: 10px;
}
.login-content-part {
line-height: 30px;
}
</style>
</head>
<body>
<div class="login-box">
<div class="login-title">
XXX管理系统登录
</div>
<div class="login-content-part">
<form action="/login" method="post">
账号:<input type="text" name="username" placeholder="请输入账号">
<br>
密码:<input type="password" name="password" placeholder="请输入密码">
<br>
<input type="submit" value="登录">
</form>
</div>
</div>
</body>
</html>
运行起来效果如下:
这个就是我们自己写的页面了,尝试登录一下
登录成功就会跳转到首页了
那登录错误怎么提示呢?
一般来说,我们在自己做页面的时候,可以不使用from表单来提交,可以使用Ajax来提交,然后配置一下错误页面返回的内容
根据返回的内容,操作dom,给出提示
配置登录失败调用的接口
@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
//拦截所有
.antMatchers("/manager").hasAuthority("admin")//admin 角色才可以访问
.antMatchers("/list").hasAuthority("register")//注册用户就可以访问
.antMatchers("/loginPage").permitAll()
.antMatchers("/login").permitAll()
.antMatchers("/failure").permitAll()
.antMatchers("/**")
.fullyAuthenticated();
.and()
//.httpBasic();
.formLogin()
.loginPage("/loginPage")
.defaultSuccessUrl("/index")
.failureUrl("/failure")
.loginProcessingUrl("/login")
.and().csrf().disable();
}
如果用vue.js写则非常 简单,如果是失败的,则给出提示即可。
修改user和password的name
看我们的表单
<html>
<head>
<title>登录界面</title>
<style>
.login-box {
width: 300px;
margin: 50px auto 0;
text-align: center;
}
.login-title {
margin-bottom: 10px;
}
.login-content-part {
line-height: 30px;
}
</style>
</head>
<body>
<div class="login-box">
<div class="login-title">
XXX管理系统登录
</div>
<div class="login-content-part">
<form action="/login" method="post">
账号:<input type="text" name="username" placeholder="请输入账号">
<br>
密码:<input type="password" name="password" placeholder="请输入密码">
<br>
<input type="submit" value="登录">
</form>
</div>
</div>
</body>
</html>
这里面有 name="username",以及name="password",我们可不可以自己写呢?
自定义呢?
可以的呢
@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
//拦截所有
.antMatchers("/manager").hasAuthority("admin")//admin 角色才可以访问
.antMatchers("/list").hasAuthority("register")//注册用户就可以访问
.antMatchers("/loginPage").permitAll()
.antMatchers("/login").permitAll()
.antMatchers("/failure").permitAll()
.antMatchers("/**")
.fullyAuthenticated();
.and()
//.httpBasic();
.formLogin()
.loginPage("/loginPage")
.passwordParameter("sob_password")
.usernameParameter("sob_username")
.defaultSuccessUrl("/index")
.failureUrl("/failure")
.loginProcessingUrl("/login")
.and().csrf().disable();
}
如果嫌弃这样写太挤了,可以分来成这样写:
@Override
protected void configure(HttpSecurity http) throws Exception {
//设置认证规则
http.authorizeRequests()
//拦截所有
.antMatchers("/manager").hasAuthority("admin")//admin 角色才可以访问
.antMatchers("/list").hasAuthority("register")//注册用户就可以访问
.antMatchers("/loginPage").permitAll()
.antMatchers("/login").permitAll()
.antMatchers("/failure").permitAll()
.antMatchers("/**")
.fullyAuthenticated();
//关闭跨域攻击
http.csrf().disable();
//登录
http//.httpBasic();
.formLogin()
.loginPage("/loginPage")
.passwordParameter("sob_password")
.usernameParameter("sob_username")
.defaultSuccessUrl("/index")
.failureUrl("/failure")
.loginProcessingUrl("/login");
}
这样子改完,我们的html页面的表单,也修改一下
<div class="login-content-part">
<form action="/login" method="post">
账号:<input type="text" name="sob_username" placeholder="请输入账号">
<br>
密码:<input type="password" name="sob_password" placeholder="请输入密码">
<br>
<input type="submit" value="登录">
</form>
</div>
自定义登录成功/登录失败跳转
这个我们前面已经配置了,同学们看前面的配置内容吧。
登录成功的,和登录失败的
.defaultSuccessUrl("/index") .failureUrl("/failure")
退出登录
//退出登录,退出登录成功后跳转到首页,或者登录页面,自己设置啦
http.logout().logoutSuccessUrl("/login");
前端则调用url
http://xxx/logout即可
okay啦,到这里我们就配置完了登录页面,退出登录相关的内容。
如果要结合验证码,可以使用ajax解决,登录前,先验证一下验证码,再去登录即可。