思路

我的思路简单实现，登录失败信息并没有存放在后台。因此对专业程序员而已，其实是可以绕过验证码认证的。但可在此基础上可实现失败信息存放在后台的形式。

客户浏览器存放一个名为showcode的cookie。当cookie有值且为1时，才显示验证码。
同样后台根据cookie判断是否需要验证验证码。
注意：登录成功后，要重置showcode

登录页面

页面通过showcode控制展示

gl><el-form-item label="验证码" v-show="showcode">
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-key"></use>
  </svg>
  <img src="" id="ImageCatpcha" alt="正在加载" class="yzm"/>
  <el-input placeholder="验证码" class="dis-table" name="code">
  </el-input>
</el-form-item>

从cookie中获取showcode

function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
        return unescape(arr[2]);
    else
        return null;
}
var showcode = getCookie("showcode");

添加showcode属性

new Vue({
  el: '#app',
  data: function() {
    return {
        activeName: 'first',
        gl>showcode:showcode==1
    }
  },
  methods:{
    handleClick:handleClick,
    submitForm:submitForm
  }
})

后台修改

http.addFilterBefore(validateCodeFilter,UsernamePasswordAuthenticationFilter.class);
http.formLogin().loginPage("/login")
        gl>.successHandler(new MyAuthenticationSuccessHandler())
        gl>.failureHandler(new MyAuthenticationFailureHandler())
;

validateCodeFilter

private void validate(HttpServletRequest request) {
    gl>if(!needValidate(request))
        gl>return;
    String code = request.getParameter("code");
    String time = request.getParameter("time");
    String md5 = request.getParameter("md5");
    String username = request.getParameter("username");
    boolean isOk = codeService.checkCode(code, time, md5);
    if(!isOk)
        throw new ValidateCodeException("验证码错误");        
}
gl>private boolean needValidate(HttpServletRequest request){
    gl>if(getCookie(request,"showcode").equals("1"))
        gl>.return true;
    gl>else
        gl>.return false;
gl>}
gl>private String getCookie(HttpServletRequest request,String name){
    gl>Cookie[] cookies = request.getCookies();
    gl>if (cookies==null||cookies.length<1) {
        gl>.return null;
    gl>.}
    gl>Cookie cookie = null;
    gl>for (Cookie c : cookies) {
        gl>if (name.equals(c.getName())) {
            gl>cookie = c;
            gl>break;
        gl>}
    gl>}
    gl>if(cookie==null)
        gl>.return "";
    gl>else
        gl>return cookie.getValue();
gl>}

MyAuthenticationSuccessHandler.java
登录成功，清除showcode

package cnki.bdms.web.ui.security;
import org.springframework.security.core.Authentication;
import org.springframework.security.web.authentication.SavedRequestAwareAuthenticationSuccessHandler;
import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class MyAuthenticationSuccessHandler extends SavedRequestAwareAuthenticationSuccessHandler {
    @Override
    public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response, Authentication authentication) throws ServletException, IOException {
        gl>response.addCookie(new Cookie("showcode",""));
        super.onAuthenticationSuccess(request, response, authentication);
    }
}

MyAuthenticationFailureHandler.java
登录失败，设置showcode的值为1

package cnki.bdms.web.ui.security;
import org.springframework.security.core.AuthenticationException;
import org.springframework.security.web.DefaultRedirectStrategy;
import org.springframework.security.web.authentication.AuthenticationFailureHandler;
import org.springframework.security.web.authentication.SimpleUrlAuthenticationFailureHandler;
import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class MyAuthenticationFailureHandler implements AuthenticationFailureHandler {
    @Override
    public void onAuthenticationFailure(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, AuthenticationException e) throws IOException, ServletException {
        gl>httpServletResponse.addCookie(new Cookie("showcode","1"));
        SimpleUrlAuthenticationFailureHandler handler = new SimpleUrlAuthenticationFailureHandler();
        handler.setDefaultFailureUrl("/login?error=true");
        handler.onAuthenticationFailure(httpServletRequest, httpServletResponse, e);
    }
}

完。