社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
springsecurity默认为我们提供了一个登录页面,在登录页面,如果填入的用户名和密码不匹配后端设置,那么就会在当前页面弹出错误提示,这个页面很简单,而且是单调的。在实际开发中,有时候,为了让登录页面更加的美观和展现定制化的内容,我们需要自定义登录页面。
自定义登录页面需要改变的地方在以下几处:
1、security配置文件中增加form-login标签,并配置登录成功和失败的跳转页面。另外还需要配置csrf标签。
<http auto-config="true">
<intercept-url pattern="/admin**" access="hasRole('ROLE_USER')" />
<form-login
login-page="/login"
default-target-url="/admin"
authentication-failure-url="/login?error"
username-parameter="username"
password-parameter="password"/>
<logout logout-success-url="/login?logout"/>
<!-- enable csrf protection -->
<csrf/>
</http>
2、编写一个页面login.jsp,并在页面中指定几个主要的值(action,csrf)。
<div class="table">
<c:if test="${not empty error}">
<div class="error">${error}</div>
</c:if>
<c:if test="${not empty msg}">
<div class="error">${msg}</div>
</c:if>
<form action="<c:url value="login"/>" method="post">
<div class="list-item">
<label>UserName:</label>
<input type="text" name="username" placeholder="UserName"/>
</div>
<div class="list-item">
<label>Password:</label>
<input type="password" name="password" placeholder="Password"/>
</div>
<div class="list-item">
<input type="submit" value="Login"/>
<input type="reset" value="Reset"/>
</div>
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
</form>
</div>
3、定义一个跳转到登录页面的方法。
@RequestMapping(value="/login",method=RequestMethod.GET)
public ModelAndView loginPage(@RequestParam(name="error",required=false)String error,
@RequestParam(name="logout",required=false)String logout){
ModelAndView page = new ModelAndView();
page.setViewName("login");
page.addObject("title", "login");
if(error != null){
page.addObject("error", "Invalid username or password.");
}
if(logout != null){
page.addObject("msg", "You've been logged out successfully.");
}
return page;
}
在登录成功跳转的主页中,如果需要退出,我们可以这样配置退出链接。
<c:url var="logoutUrl" value="logout"/>
<c:if test="${pageContext.request.userPrincipal.name != null}">
welcome you,${pageContext.request.userPrincipal.name }
<a href="javascript:formSubmit();">Logout</a>
</c:if>
<!-- csrf for logout -->
<form action="${logoutUrl}" method="post" id="logoutForm">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
</form>
<script>
function formSubmit(){document.getElementById("logoutForm").submit();}
</script>
做了这些工作之后,再进行测试。
进入需要权限的页面,提示登录。
输入错误登录用户名或者密码提示Invalid username or password
登录成功跳转页面
点击退出登录,退出登录。
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!