Vaadin Flow 自定义界面,用于在不可见时切换组件可见性,而无需通过 DOM 进行访问

问题描述

我们目前正在尝试改进我们的界面,以根据授权检查切换 vaadin UI (14.3.1) 不同组件的可见性。目标是将我们的组件的授权/角色设置为配置,以便基于当前登录用户,UI 知道要显示哪些组件以及要“隐藏”哪些组件,而无需庞大的 if-我们代码的每个视图中的语句。

// creation of a button with additional authorization configuration
Button b = new CustomButton("Save").withAuthorization(12345);

这些可能包括基本字段、选项卡、列、按钮等,因此对于我们拥有的每个组件,基于授权的可见性切换界面位于真实组件之上,为开发人员提供了一个平滑的身份验证选项的组件。这些组件的抽象自定义层已经存在,因为我们在所有这些组件上都有更多的自定义功能。因此,这将是我们为授权切换添加额外“配置”的好地方。

我们的第一种方法是通过 vaadin 的 setVisible 函数切换组件,这很好,但会带来一些安全问题。当将可见性切换为 false 时,项目不会完全从 UI 中删除,而只是隐藏和阻止交互。这意味着您只需执行一些 DOM 操作就可以将这些元素带回 UI。由于交互被阻止,元素可能无法正常工作,但仍然可以显示信息。对于我们的某些组件来说,这还不够,因为有些信息对用户来说是不可见的,因此仅将其设置为 invisible 是不够的。

另一种方法是在添加元素到 UI 之前手动检查授权,这会导致我们所有视图中出现大量 if 语句。

Button b = new Button("Save");
// this would have to be done for every single component that should land in the UI
if(user.hasAuth(12345)){
    add(b);
}

所以这是我的问题:我如何调整或配置组件,以便我们可以创建、配置并将它们添加到 UI 中,并能够通过一个无法撤消/设置为通过 DOM 操作可见的简单标志来切换其可见性?是否有组件的任何标志或功能可以根据简单的布尔检查从后端完全删除元素或将其添加到 UI 中,该检查可以在运行时从后端更改?

我们在后台的目标非常简单,我们只想定义一种基于对所有组件的授权来切换元素的简单方法,以便开发人员可以确保一切都得到正确和安全的处理,而无需重新实现相同的一遍又一遍的逻辑。

提前致谢!

解决方法

Flow 没有提供这样的机制,我认为基于可用架构没有任何简单的方法来实现。

恐怕您不得不求助于您已经发现的替代方案。使用混合方法,即使用 setVisible 管理没有敏感内容的组件,然后使用仅用于敏感内容的带有 if (hasAuth(1234)) add(component); 的额外样板,是否明智?在某些情况下可能有用的另一种模式可能是根据权限设置内容,即 holder.setText(hasAuth(1234) ? sensitiveContent : "");