Роли пользователей / разрешения на веб-интерфейсе - React / GraphQL / Apollo Client

Недавно начал работать с React / Apollo Client / Auth0 / Hasura и у меня возникли вопросы по обработке разрешений внешнего интерфейса. Я использую Auth0 для обработки моей авторизации в отношении того, вошел ли пользователь в систему, а также для проверки моей серверной части при обработке мутаций / запросов. Мой вопрос теперь в том, как справиться с этим на переднем конце.

Пользователь может создать команду, которая будет хранить информацию в моей таблице команд, а также создать запись в моей таблице team_staff в качестве менеджера или тренера. Все было просто. Сейчас я хочу, чтобы пользователь посещал, например: www.mysite.com / team / update / 1, чтобы проверить, существует ли пользователь в таблице team_staff, и, если нет, показать ему сообщение об ошибке или даже перенаправление. Также нужно скрыть определенные кнопки при просмотре команды в зависимости от того, являются они сотрудниками или нет.

Должен ли я обрабатывать это при входе в систему и делать запрос для всех команд, в которых пользователь является сотрудником, и хранить в сеансе / cookie или иметь запрос / проверку внутри этого компонента каждый раз, когда он вызывается? Или я далеко и должен сделать это по-другому?

Надеюсь, этот вопрос имеет смысл. Спасибо!


reactjs graphql apollo apollo-client hasura
person Blake Hayes    schedule 25.08.2020    source источник
comment
После входа в систему вы можете запросить разрешения, роли, все, что вам нужно ... каждая кнопка просмотра / компонента / даже может useQuery читать ее с помощью cache-only политики выборки или запрашивать более подробные / подробные права доступа   -  person xadm    schedule 25.08.2020
comment
@xadm Спасибо за помощь. Завершение этого маршрута.   -  person Blake Hayes    schedule 04.09.2020

Ответы (1)


arrow_upward
0
arrow_downward

Этот вопрос имеет смысл, я считаю, что у многих разработчиков были бы похожие проблемы.

TL; DR; Сделайте запрос API в componentDidMount, чтобы получить нужные разрешения (конечно, после входа в систему).

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

Могу дать несколько подходов. Сначала вызовите API сразу после входа в систему, чтобы получить информацию о разрешениях, например:

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

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

Все запросы API должны быть помещены в componentDidMount компонента страницы, потому что вам нужно убедиться, что разрешение должно применяться правильно, как только серверная часть внесет изменения.

Удачного кодирования!

person ShinaBR2    schedule 27.08.2020
comment
Спасибо за ответ! После некоторых проб и ошибок (и просмотра Redux) у меня все заработало. - person Blake Hayes; 04.09.2020