Пользовательский интерфейс Vaadin Flow для переключения видимости компонентов без доступа через DOM, когда он невидим

#vaadin #vaadin-flow

Вопрос:

в настоящее время мы пытаемся улучшить наши интерфейсы, чтобы переключать видимость различных компонентов нашего пользовательского интерфейса vaadin (14.3.1) на основе проверки авторизации. Цель состоит в том, чтобы установить авторизацию/роль для наших компонентов в качестве конфигурации, чтобы на основе текущего пользователя, вошедшего в систему, пользовательский интерфейс знал, какие компоненты показывать, а какие «скрывать», не имея громоздких операторов if в каждом представлении нашего кода.

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

Они могут включать основные поля, вкладки, столбцы, кнопки и т.д., Так что для каждого компонента, который у нас есть, интерфейс для переключения видимости на основе авторизации находится поверх реального компонента, предоставляя разработчику возможность проверки подлинности компонентов. Абстрактный пользовательский слой этих компонентов уже существует, потому что у нас все равно больше пользовательских функций для всех этих компонентов. Так что это было бы хорошим местом для нас, чтобы добавить дополнительную «конфигурацию» для переключения авторизации.

Наш первый подход состоял в том, чтобы переключать компоненты setVisible с помощью функции vaadin, что довольно приятно, но вызывает некоторые проблемы с безопасностью. При переключении видимости на false элементы не совсем удаляются из пользовательского интерфейса, а просто скрываются и блокируются для взаимодействия. Это означает, что вы можете вернуть эти элементы в пользовательский интерфейс, просто выполнив некоторые манипуляции с DOM. Элементы могут работать неправильно из-за блокировки взаимодействия, но информация все равно может отображаться. Для некоторых наших компонентов этого просто недостаточно, потому что есть некоторая информация, которая никоим образом не должна быть видна пользователю, поэтому просто установить ее невидимой недостаточно.

Альтернативой было бы вручную проверить наличие авторизации перед добавлением элемента в пользовательский интерфейс, что привело бы к огромному количеству операторов 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);
}
 

Итак, вот мой вопрос: как я могу настроить или настроить компоненты, чтобы мы могли создавать, настраивать и добавлять их в пользовательский интерфейс с возможностью переключения его видимости с помощью простого флага, который нельзя отменить/установить видимым с помощью манипуляций DOM? Существует ли какой-либо флаг или функция компонента, который полностью удаляет элемент из пользовательского интерфейса или добавляет его в пользовательский интерфейс на основе простой логической проверки, которую можно изменить во время выполнения из серверной части?

Наша цель в фоновом режиме довольно проста, мы просто хотим определить один простой способ переключения элементов на основе авторизации для всех наших компонентов, чтобы разработчик мог быть уверен, что все обрабатывается правильно и безопасно, не повторяя одну и ту же логику снова и снова.

Заранее спасибо!

Ответ №1:

Поток не предоставляет такого механизма, и я не думаю, что существует какой-либо простой способ его реализации, основанный на доступной архитектуре.

Боюсь, вам придется прибегнуть к альтернативам, которые вы уже обнаружили. Может ли быть разумным использовать гибридный подход, при котором компоненты без конфиденциального содержимого управляются с использованием setVisible , а затем дополнительного шаблона if (hasAuth(1234)) add(component); только для конфиденциального содержимого? Еще одним шаблоном, который может быть полезен в некоторых случаях, может быть настройка содержимого на основе разрешений, т. Е. holder.setText(hasAuth(1234) ? sensitiveContent : "");