Vaadin 登录覆盖

Question

我对 java 和 vaadin 都很陌生。希望能够得到一些关于如何改进我的代码的好技巧。我想重写下面的代码以使用 Vaadin 的 -> LoginOverlay 而不是下面的代码。

正如我所说，我正在努力学习，所以我使用了这个例子的代码：https : //www.youtube.com/watch?v=oMKks5AjaSQ&t=1158s

但是，LoginOverlay 似乎是显示其登录部分的更好方式。如本例所示：https : //www.youtube.com/watch?v=pteip-kZm4M

所以我的问题是如何将下面的代码编写为 LoginOverlay。

public class LoginView extends Div {

public LoginView(AuthService authService) {
    setId("login-view");
    var username = new TextField("Username");
    var password = new PasswordField("Password");
    add(
            new H1("Welcome"),
            username,
            password,
            new Button("Login", event -> {
                try {
                    authService.authenticate(username.getValue(), password.getValue());
                    UI.getCurrent().navigate("home");
                } catch (AuthService.AuthException e) {
                    Notification.show("Wrong credentials.");
                }
            }),
             new RouterLink("Register", RegisterView.class)
    );
}

}

我只是为了转换代码才走到这一步。

代码的新部分的澄清。该代码不起作用。loginOverlay.addLoginListener (event -> 可能需要以不同的方式编写。如果有任何帮助，我正在使用 IntelliJ 2020.3.4。

public class LoginView2 extends Composite<LoginOverlay> {

public LoginView2(AuthService authService) {
    setId("login-view");

    LoginOverlay loginOverlay = getContent();
    loginOverlay.setTitle("Welcom");
    loginOverlay.setDescription("Manage your business tasks");
    loginOverlay.setOpened(true);

    loginOverlay.addLoginListener(event -> {try {
        if(authService.authenticate(username.getValue(), password.getValue());
                    UI.getCurrent().navigate("home");
                } catch (AuthService.AuthException e) {
                    Notification.show("Wrong credentials.");
                }
            }),
             new RouterLink("Register", RegisterView.class);
      }
    }
}

}

非常感谢您提供的所有帮助。非常感谢让 stackoverflow 如此出色的所有人。

Answer 1

对代码的作用知之甚少的复制粘贴代码片段是灾难的秘诀，尤其是在涉及安全性方面。

您的代码中存在各种错误：大括号错位、使用了不存在的变量以及RouterLink远离它所属的地方。

我知道你必须从某个地方开始。我建议从实际编译的代码开始，然后逐渐添加东西，在每一步测试你到目前为止所拥有的东西。

以下是一些提示LoginView2：

1. 删除整个loginOverlay.addLoginListener(...)代码，包括authService.authenticate调用和RouterLink. 确保此时您可以运行该应用程序，并且您可以看到登录覆盖。
2. 添加回登录侦听器，但现在只在其中显示通知。测试您是否可以运行该应用程序，并且如果您单击Login，则会显示您的通知。

loginOverlay.addLoginListener(event -> {
    Notification.show("This is working");
});

3. 实施认证。您可以调用authService.authenticate(...)if 语句内部，但该方法不返回任何内容。相反，如果身份验证失败，它会抛出异常，因此是 try-catch。这意味着在try { ... }块内，您​​在authService.authenticate(...)调用之后放置的任何代码仅在没有抛出异常时才会执行，即如果身份验证成功。

4. 没有username或password变量。第一个 YouTube 视频以文本字段的形式定义了这些变量。使用登录覆盖，它会为您创建这些字段，那么您如何从中获取相应的值呢？