Если вы хотите разработать профессиональное программное обеспечение на React Native, вы наверняка встретите самый популярный шаблон TypeScript Ignite от Infinite Red, Inc. В шаблоне очень хорошая документация, но нет руководства по процессу аутентификации.
Хотя вы можете найти его в официальной документации по React Navigation, этого все же недостаточно, поскольку в примере показана реализация в Redux. Ignite использует MobX-State-Tree для управления состоянием, и в Интернете не так много информации об авторизации.
В этой статье я покажу вам, как реализовать процесс аутентификации в Ignite.
Примечание. Я использую Ignite в версии 7.5.0 и @ response-navigation / native в версии 6.0.1.
1. Создайте модель хранилища аутентификации.
В каталоге проекта выполните следующую команду:
npx ignite-cli generate model authentication-store
Это сгенерирует следующий код в каталоге моделей:
Теперь добавьте новую логическую переменную, которая будет соответствовать тому, вошел пользователь в систему или нет. По умолчанию он не будет авторизован.
Затем создайте два действия. Один будет отвечать за вход, другой - за выход.
Я создал extension withStatus
, чтобы упростить отображение ActivityIndicator на экране.
Хорошо, нашей модели достаточно для входа и выхода. Теперь нам нужен новый класс, который будет отвечать за связь с API.
2. Создайте класс AuthenticationApi.
Мой вход в систему и выход из системы заключается в отправке запроса POST и PATCH на соответствующий конечный адрес. Я сам создал этот api, он находится на моем собственном сервере.
Теперь наша логика MobX-State-Tree готова для использования в компонентах.
3. Отредактируйте навигатор приложения.
Пришло время экранов. Введите app-navigator.tsx
файл и отредактируйте его следующим образом:
Примечание. Не забудьте заключить компонент в оболочку с помощью Observer (), потому что вы хотите отслеживать изменения динамически.
Если пользователь вошел в систему, предоставьте ему доступ ко всем экранам, доступным после входа в систему. В противном случае разрешите ему доступ только к экранам без авторизации.
Итак, теперь в AppStack объявлены экраны, которые вы используете для приложения после входа в систему:
а в AuthStack есть экраны, не требующие аутентификации:
Благодаря функции обернутого наблюдателя () мобильное приложение будет понимать, когда показывать пользовательский AppStack, а когда - AuthStack.
4. Создайте действие на экране.
Чтобы войти в систему, вам необходимо использовать действие входа из хранилища аутентификации:
и действие выхода для выхода:
Примечание. Я использую библиотеку response-hook-form для форм React Native.
Ниже приведен пример экрана входа в систему:
Вы также можете найти эту статью в моем блоге по разработке программного обеспечения, где я делюсь своими решениями проблем, с которыми я столкнулся во время моей карьеры инженера-программиста.
Если у вас возникнут дополнительные вопросы, вы можете написать мне в LinkedIn или Twitter.