Vaadin自定义登录表单无法提交至action端点问题排查

问题分析 #

• 提交按钮未触发原生表单提交：当前使用的Vaadin Button组件默认不是原生表单的submit类型按钮，点击时只会触发Vaadin的客户端事件，不会触发表单的POST提交动作。你尝试设置的on-click="submit"属性对Vaadin Button无效，因为Vaadin会接管组件的事件处理逻辑。
• 事件逻辑冲突：在LoginView的邮箱值变化监听中，动态添加/移除点击事件的逻辑可能覆盖了表单提交的触发逻辑，导致登录状态下点击按钮没有执行提交操作。

解决方案 #

方案1：改用原生Submit按钮（推荐） #

将Vaadin Button替换为原生HTML提交按钮，自动触发表单POST提交，无需额外事件处理：

修改HtmlLoginForm类中的提交按钮定义：

// 替换原有的private Button submitButton;
private Element submitButton;

// 在init方法中创建原生提交按钮
submitButton = ElementFactory.createButton("Log in/Sign up");
submitButton.setAttribute("type", "submit");
// 添加Vaadin主题样式，保持视觉一致性
submitButton.setAttribute("class", "vaadin-button vaadin-button--primary");

在buildForm方法中添加该原生元素到布局：

// 替换原有的formLayout.add(submitButton);
formLayout.getElement().appendChild(submitButton);

方案2：在Vaadin Button点击事件中手动触发表单提交 #

如果需要保留Vaadin Button的动态修改能力，在点击事件中通过JS手动触发原生表单提交：

1. 在HtmlLoginForm中添加通用的表单提交方法：

public void submitForm() {
    getElement().executeJs("this.submit()");
}

2. 修改LoginView中的值变化监听逻辑，确保登录状态下点击按钮执行提交：

loginForm.getEmailField().addValueChangeListener(event -> {
    if(userService.emailExists(event.getValue())) {
        loginForm.getResetPasswordLink().setEnabled(true);
        loginForm.getSubmitButton().setText("Log in");
        loginForm.getSubmitButton().setEnabled(true);
        // 移除注册跳转逻辑，添加表单提交逻辑
        loginForm.getSubmitButton().removeAllListeners();
        loginForm.getSubmitButton().addClickListener(e -> loginForm.submitForm());
    } else {
        loginForm.getResetPasswordLink().setEnabled(false);
        loginForm.getSubmitButton().setText("Sign up");
        loginForm.getSubmitButton().setEnabled(true);
        loginForm.getSubmitButton().removeAllListeners();
        loginForm.getSubmitButton().addClickListener(this::signupHandler);
    }
});

额外校验点 #

• 确认Spring Security配置中，loginProcessingUrl("/login")已正确配置，且usernameParameter("username")、passwordParameter("password")与表单组件的name属性完全匹配。
• 检查表单action属性是否正确，若应用有上下文路径，需改为action="/{context-path}/login"。

内容的提问来源于stack exchange，提问作者XHA