Если вы хотите разработать профессиональное программное обеспечение на 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.