1

我有一些代码可以将 Vaadin LoginForm 组件添加到我的页面

LoginForm component = new LoginForm();
component.addLoginListener(e -> {
       boolean isAuthenticated = myAuthMethod();
       if (isAuthenticated) {
            System.out.println("TEST");
        } else {
            component.setError(true);
        }
    });

 add(component);

但它只是显示一个空白页。我在 Chrome 中的 dom 编辑器显示一个空标签...

我正在运行 Vaadin 14.07

在此处输入图像描述

任何想法为什么会这样？

4

3 回答 3

0

这LoginForm对我有用。您的问题可能在您在此处显示的代码之外。我们需要知道您是如何实例化和显示LoginForm.

示例应用

这是一个使用 Vaadin 14.1.2 的示例应用程序。我使用了由Vaadin starter page生成的新“Plain Java Servlet”风格项目。我没有修改 POM 文件。我使用捆绑的 Jetty 服务器运行该应用程序，并使用适用于 macOS 的 Google Chrome 版本 79.0.3945.79（官方构建）（64 位）。

我创建了一个简单的User类。

package work.basil.example;

import java.util.Objects;
import java.util.UUID;

public class User
{
    private UUID id;
    private String username;

    public User ( UUID id , String username )
    {
        this.id = Objects.requireNonNull( id );
        this.username = Objects.requireNonNull( username );
    }

    // ------------|  Object  |---------------------------------
    @Override
    public boolean equals ( Object o )
    {
        if ( this == o ) return true;
        if ( o == null || getClass() != o.getClass() ) return false;
        User user = ( User ) o;
        return id.equals( user.id );
    }

    @Override
    public int hashCode ( )
    {
        return Objects.hash( id );
    }

    @Override
    public String toString ( )
    {
        return "User{ " +
                "id=" + id +
                " | username='" + username + '\'' +
                " }";
    }
}

和一Authenticator堂课。对于这个简单的演示案例，注释掉或始终通过用户或始终拒绝用户的行。

package work.basil.example;

import java.util.Optional;
import java.util.UUID;

public class Authenticator
{
    Optional < User > authenticate ( String username , String password )
    {
        User user = new User( UUID.fromString( "76317e14-20a5-11ea-978f-2e728ce88125" ) , username );
        return Optional.of( user );
        //        return Optional.empty();
    }
}

用户成功通过身份验证后显示的虚拟内容视图。

package work.basil.example;

import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;

public class ContentView extends VerticalLayout
{
    public ContentView ( )
    {
        this.add( new H1( "Content goes here" ) );
    }
}

MainView将它们与此布局结合在一起。

package work.basil.example;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.login.AbstractLogin;
import com.vaadin.flow.component.login.LoginForm;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;
import com.vaadin.flow.server.VaadinSession;

import java.util.Objects;
import java.util.Optional;

/**
 * The main view contains a button and a click listener.
 */
@Route ( "" )
@PWA ( name = "Project Base for Vaadin", shortName = "Project Base" )
public class MainView extends VerticalLayout
{

    public MainView ( )
    {
        this.display();
    }

    private void display ( )
    {
        if ( Objects.isNull( VaadinSession.getCurrent().getAttribute( User.class ) ) )
        {
            this.removeAll();
            this.add( this.makeLoginForm() );
        } else
        { // Else we have a User, so must be authenticated.
            this.removeAll();
            this.add( new ContentView() );
        }
    }

    private LoginForm makeLoginForm ( )
    {
        Authenticator authenticator = new Authenticator();
        LoginForm component = new LoginForm();
        component.addLoginListener( ( AbstractLogin.LoginEvent loginEvent ) -> {
            Optional < User > user = authenticator.authenticate( loginEvent.getUsername() , loginEvent.getPassword() );
            if ( user.isPresent() )
            {
                VaadinSession.getCurrent().setAttribute( User.class , user.get() );
                this.display();
            } else
            {
                component.setError( true );
            }
        } );
        return component;
    }
}

对于“退出”功能，您的代码只需User从会话中删除对象，然后MainView::display再次调用。

于 2019-12-17T08:30:44.090 回答
0

我也有这个问题。这可能是另一个原因。但是，我可以通过运行干净并安装 Maven 来解决它。

于 2019-10-01T08:57:42.427 回答
0

第一次添加组件时，内部前端依赖项列表可能尚未注册该组件，因此不会在启动时从 npm 加载相关的客户端文件。

在这种情况下，需要一个简单的 Maven 安装来更新前端依赖项列表。之后启动服务器应自动加载相应的文件，从而正确显示组件。

于 2019-12-04T08:14:42.803 回答