原创首发
SpringSecurity跟SpringBoot的整合-自定义登录页面
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解决，登录前，先验证一下验证码，再去登录即可。
