如何使用 Vaadin 框架在 Java Web App 中无效登录时显示错误消息？>

Question

所以我正在尝试构建一个网络应用程序，在设计登录视图时，我希望它在用户输入无效的登录名或密码时显示错误消息。问题是，每当登录失败时，页面都会自行重新加载，并且不会进行任何更改。

我编写了以下代码来尝试实现我的结果，但所发生的只是我的页面只是重新加载，没有其他任何事情。应该发生的是一条弹出消息，通知用户用户名或密码无效。

Answer 1

我用 Vaadin 24 和 Spring boot 解决了这个问题！ 错误消息将添加到输入字段。

@AnonymousAllowed
@PageTitle("Login")
@Route(value = "login")
public class LoginView extends LoginOverlay implements BeforeEnterObserver {

private final AuthenticatedUser authenticatedUser;

public LoginView(AuthenticatedUser authenticatedUser) {
    this.authenticatedUser = authenticatedUser;
    setAction(RouteUtil.getRoutePath(VaadinService.getCurrent().getContext(), getClass()));

    LoginI18n i18n = LoginI18n.createDefault();
    i18n.setHeader(new LoginI18n.Header());
    i18n.getHeader().setTitle("pVerein");
    i18n.getHeader().setDescription("Login with Username and Passwort");
    i18n.setAdditionalInformation(null);
    i18n.getForm().setUsername("Username");
    i18n.getForm().setPassword("Password");
    i18n.getForm().setSubmit("Login");
    LoginI18n.ErrorMessage errorMessage = new LoginI18n.ErrorMessage();
    errorMessage.setTitle("Username or password are incorrect");
    errorMessage.setMessage("Check your entry and enter your login name and password again!");
    i18n.setErrorMessage(errorMessage);
    i18n.getForm().setForgotPassword("Forgot Password");
    setI18n(i18n);


    setForgotPasswordButtonVisible(true);
    addForgotPasswordListener(e -> schowForgotPasswordDialog(e));

    setOpened(true);
}

private void schowForgotPasswordDialog(ForgotPasswordEvent e) {
    Notification notification = Notification.show("Function will be made available in a later version!", 5000,Notification.Position.MIDDLE);
    notification.addThemeVariants(NotificationVariant.LUMO_SUCCESS);
}

@Override
public void beforeEnter(BeforeEnterEvent event) {
    if (authenticatedUser.get().isPresent()) {
        // Already logged in
        setOpened(false);
        event.forwardTo("dashboard");
    }setError(event.getLocation().getQueryParameters().getParameters().containsKey("error"));
}

}

希望对你有帮助