1、在后台登录时，会抛出各种登录不成功的提示，需要动态改变前端组件的错误提示信息。不同类型的错误信息编码，要控制不同的组件样式和提示内容。以下是后台抛出的错误类型和错误信息（使用shiro认证）。
try { subject.login(token); //通过认证 if (subject.isAuthenticated()) { Set<String> roles = roleService.getRoleCodeSet(userName); if (!roles.isEmpty()) { subject.getSession().setAttribute("isAuthorized", true); return MAIN_PAGE; } else {//没有授权 msg = "您没有得到相应的授权！"; model.addAttribute("message", new ResultCode("1", msg)); subject.getSession().setAttribute("isAuthorized", false); LOGGER.error(msg); return LOGIN_PAGE; } } else { return LOGIN_PAGE; } //0 未授权 1 账号问题 2 密码错误 3 账号密码错误 } catch (IncorrectCredentialsException e) { msg = "登录密码错误. Password for account " + token.getPrincipal() + " was incorrect"; model.addAttribute("message", new ResultCode("2", msg)); LOGGER.error(msg); } catch (ExcessiveAttemptsException e) { msg = "登录失败次数过多"; model.addAttribute("message", new ResultCode("3", msg)); LOGGER.error(msg); } catch (LockedAccountException e) { msg = "帐号已被锁定. The account for username " + token.getPrincipal() + " was locked."; model.addAttribute("message", new ResultCode("1", msg)); LOGGER.error(msg); } catch (DisabledAccountException e) { msg = "帐号已被禁用. The account for username " + token.getPrincipal() + " was disabled."; model.addAttribute("message", new ResultCode("1", msg)); LOGGER.error(msg); } catch (ExpiredCredentialsException e) { msg = "帐号已过期. the account for username " + token.getPrincipal() + " was expired."; model.addAttribute("message", new ResultCode("1", msg)); LOGGER.error(msg); } catch (UnknownAccountException e) { msg = "帐号不存在. There is no user with username of " + token.getPrincipal(); model.addAttribute("message", new ResultCode("1", msg)); LOGGER.error(msg); } catch (UnauthorizedException e) { msg = "您没有得到相应的授权！" + e.getMessage(); model.addAttribute("message", new ResultCode("1", msg)); LOGGER.error(msg); }
2、前端核心JS代码
<script> $(function () { $('input').iCheck({ checkboxClass: 'icheckbox_square-red', radioClass: 'iradio_square-red', increaseArea: '20%' // optional }); fillbackLoginForm(); $("#login-form").bootstrapValidator({ message:'请输入用户名/密码', submitHandler:function (valiadtor,loginForm,submitButton) { rememberMe($("input[name='rememberMe']").is(":checked")); valiadtor.defaultSubmit(); }, fields:{ userName:{ validators:{ notEmpty:{ message:'登录邮箱名或用户名不能为空' } } }, password:{ validators:{ notEmpty:{ message:'密码不能为空' } } } } }); <!--freemark语法，查看是否从后台传送过来错误信息，并初始化错误提示组件LoginValidator--> <#if message??> new LoginValidator({ code:"${message.code?default('-1')}", message:"${message.message?default('')}", userName:'userName', password:'password' }); </#if> }); //使用本地缓存记住用户名密码 function rememberMe(rm_flag){ //remember me if(rm_flag){ localStorage.userName=$("input[name='userName']").val(); localStorage.password=$("input[name='password']").val(); localStorage.rememberMe=1; } //delete remember msg else{ localStorage.userName=null; localStorage.password=null; localStorage.rememberMe=0; } } //记住回填 function fillbackLoginForm(){ if(localStorage.rememberMe&&localStorage.rememberMe=="1"){ $("input[name='userName']").val(localStorage.userName); $("input[name='password']").val(localStorage.password); $("input[name='rememberMe']").iCheck('check'); $("input[name='rememberMe']").iCheck('update'); } } </script>
3、LoginValidator组件的代码 login.js
/** * Created by billJiang on 2017/1/12. * 登录异常信息显示 */ function LoginValidator(config) { this.code = config.code; this.message = config.message; this.userName = config.userName; this.password = config.password; this.initValidator(); } //0 未授权 1 账号问题 2 密码错误 3 账号密码错误 LoginValidator.prototype.initValidator = function () { if (!this.code) return; if(this.code==0){ this.addPasswordErrorMsg(); }else if(this.code==1){ this.addUserNameErrorStyle(); this.addUserNameErrorMsg(); }else if(this.code==2){ this.addPasswordErrorStyle(); this.addPasswordErrorMsg(); }else if(this.code==3){ this.addUserNameErrorStyle(); this.addPasswordErrorStyle(); this.addPasswordErrorMsg(); } return; } LoginValidator.prototype.addUserNameErrorStyle = function () { this.addErrorStyle(this.userName); } LoginValidator.prototype.addPasswordErrorStyle = function () { this.addErrorStyle(this.password); } LoginValidator.prototype.addUserNameErrorMsg = function () { this.addErrorMsg(this.userName); } LoginValidator.prototype.addPasswordErrorMsg = function () { this.addErrorMsg(this.password); } LoginValidator.prototype.addErrorMsg=function(field){ $("input[name='"+field+"']").parent().append('<small data-bv-validator="notEmpty" data-bv-validator-for="'+field+'">' + this.message + '</small>'); } LoginValidator.prototype.addErrorStyle=function(field){ $("input[name='" + field + "']").parent().addClass("has-error"); }