Автор оригинала: Jesse Langford.
Я хотел поделиться с рисунком дизайна, которую я использую для управления, какие определенные пользователи могут или не могут видеть внутри приложений React Private, которые я строит.
Вы можете найти это полезно, если ваше приложение должно управлять тем, какие пользователи могут видеть на основе некоторых настроек на их учетной записи.
Пример, который я собираюсь показать, имеет несколько разных компонентов, работающих вместе:
- Реагировать на библиотеку компонентов пользовательского интерфейса
- Tymdercript для безопасности типа
- Redux для мирового государственного управления
- Bitmask для разрешений пользователей
Чтобы начать, скажем, у вас есть простой компонент с некоторым текстом, который вы хотите показать или скрыть на основе разрешения пользователей:
Простая версия
Простой способ сделать это, чтобы проверить уровень разрешения пользователей в случае в случае.
Примечание. В приведенных ниже примерах я использую побитовую и оператор (&), чтобы проверить мое разрешение. Операция будет производить либо 1 или 0. Замените свой собственный чек, если ваша модель разрешений отличается.
обновленная версия
В этом примере работает, но, поскольку приложение растет, всегда нужно получить статус пользователя, может добавить к сложности страницы.
Чтобы решить это для себя, я создал компонент более высокого порядка, который обернут каждый блок конфиденциальной информации и требует одного аргумента для разрешения на проверку. Компонент обрабатывает проверку состояния и шоу/скрытая логика.
Примечание. В этом примере лучше всего работает, если вы используете какой-то глобальный поставщик государства в вашем приложении.
Разрешение обертки
Теперь я могу обернуть любую конфиденциальную информацию с этим компонентом и поставлять соответствующее разрешение на проверку.
окончательный взгляд