显示为空的Vaadin LoginForm组件

Question

我有一些代码可以将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编辑器显示一个空标签...

我正在运行瓦丁14.07

你知道为什么会这样吗？

Answer 1

LoginForm为我工作。您的问题可能超出了此处显示的代码。我们需要知道您是如何实例化和显示LoginForm的。

下面是一个使用Vaadin 14.1.2的示例应用程序。我使用了一个由Vaadin初学者页面生成的新的“普通Javaservlet”风格项目。我没有动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 + '\'' +
                " }";
    }
}

和一个验证器类。对于这个简单的演示案例，注释总是超过用户或总是拒绝用户。

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" ) );
    }
}

用这个Main View布局把它拉在一起。

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。

Answer 2

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

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

Answer 3

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