В реальных проектах мобильных приложений нам обычно требуется реализовать некоторые аутентификации внутри нашего приложения. Для этого нам нужны некоторые подходы, чтобы приложение могло не только запрашивать у пользователей адрес электронной почты и пароль, но и сохранять необходимую информацию, которую мы можем использовать в нашем приложении позже. Например, когда приложение отправляет запрос на сервер для аутентификации пользователей, сервер может отправить обратно необходимую информацию о пользователях, такую как имя, фамилия, пол и т. Д. Вопрос в том, как мы можем сохранить эта информация внутри нашего приложения, чтобы любые экраны / компоненты, которым требуется доступ к информации, могли легко получить к ней доступ?
К счастью для нас, мы можем услышать концепцию под названием redux. Обычно мы используем это для глобального хранения некоторой информации / состояния внутри нашего приложения, и мы можем получить к ним доступ где угодно и где угодно. Эта концепция дает нам предсказуемое поведение, централизованную, отлаживаемую и очень гибкую реализацию (redux.js.org). В самом React Native у нас есть пакет с именем react-redux, который мы можем быстро реализовать redux внутри нашего приложения. Но, как вы, возможно, не знаете, у нас есть другой способ хранения некоторых фрагментов информации, который ведет себя так же, как redux (более или менее). Он называется контекстным API, в котором вы можете хранить некоторую информацию в контексте глобально. Итак, в чем их отличия? Почему бы нам не использовать вместо этого redux? Во-первых, реализация контекстного API, которую я хочу вам показать, ведет себя более или менее так же, как и концепция redux, где у нас есть reducer, action и так далее. Так что не волнуйтесь, мы все равно можем узнать больше об идее redux. Во-вторых, сравнение разницы между react-redux и контекстом несколько выходит за рамки этой темы. Но, конечно, есть так много сравнительных статей, которые вы можете найти. Но основной смысл использования контекстного API в том, что он прост и понятен в реализации. Позвольте мне показать вам, как мы можем реализовать аутентификацию и хранить некоторую информацию / состояние глобально с помощью контекстного API.
Обзор схемы
- Какая цель?
- Установка пакетов
- Контекст аутентификации
- Настройка экранов
- Настройка App.js
Какая цель?
Прежде чем мы начнем, давайте посмотрим, что мы собираемся построить в этом посте.
Во-первых, нам нужна форма для входа. Если пользователь успешно вошел в систему, он будет перенаправлен на другую навигацию. В демонстрационных целях мы будем использовать навигацию по вкладкам в качестве главного экрана. Конечно, за сценой для аутентификации пользователей мы будем использовать контекстный API и хранить электронную почту пользователей.
Установка пакетов
Итак, что нам нужно? Во-первых, нам нужна библиотека навигации, стек, а также навигатор вкладок. Затем, чтобы упростить задачу, нам понадобятся react-native-elements, которые мы будем использовать для значка и элементов ввода. Таким образом, нам не нужно создавать элементы с нуля. Приступим к их установке.
В этом посте мы будем использовать проект React Native. Если у вас его нет, вы можете создать его с помощью этой команды:
react-native init authContext
Затем нам нужно установить пакеты react-navigation.
npm install @react-navigation/native npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view npm install @react-navigation/stack npm install @react-navigation/bottom-tabs
На самом деле вы можете установить их с помощью только одной команды, но я не буду делать это, чтобы четко показать вам шаги по установке, которые мы сделали.
Затем нам понадобится пакет react-native-elements, чтобы иметь значки и некоторые элементы, готовые к использованию.
npm install react-native-elements npm install react-native-vector-icons react-native link react-native-vector-icons
Вот и все! Все необходимые пакеты установлены. Давайте двигаться дальше.
Контекст аутентификации
Что дальше? Прежде чем мы настроим какие-либо маршруты или экраны, нам нужно сначала создать контекст. Нам нужны два файла контекста для разных целей. Первый файл контекста, названный createDataContext.js, станет вспомогательным классом, в котором мы сможем использовать его внутри нашего файла контекста. Цель состоит в том, чтобы мы могли легко повторно использовать этот файл и использовать его внутри нашего файла контекста для извлечения Provider и Context. А второй файл, AuthContext.js, станет контекстом аутентификации, в котором мы сможем создать редуктор и некоторые функции, связанные с контекстом аутентификации. Сбивает с толку? Да, будет понятнее, если мы реализуем это напрямую.
Сначала создайте новый файл src / context / createDataContext.js.
Что делает этот файл? Хорошо, прежде чем мы перейдем к этому, давайте создадим файл AuthContext.js.
Как видите, в этот файл мы импортируем созданный ранее createDataContext.js. Функция createDataContext заключается в подключении наших редукторов, функций и некоторых значений по умолчанию. Затем выплюните / экспортируйте их как провайдера и контекста (в строках 44–47).
В строках 3–14 мы создаем новую функцию-редуктор, которая принимает входящее состояние и действие. Основной принцип использования редуктора заключается в том, что мы всегда возвращаем состояние, включая предыдущее / неизмененное состояние. Почему? Потому что оператор return внутри функции reducer переопределит существующее / предыдущее состояние. Внутри него мы создаем оператор if-else / switch для возврата нового значения состояния на основе типа действия и полезной нагрузки, которая его запускает.
Ладно, кто запускает функцию authReducer? Как вы могли догадаться, в строках 18–42 мы создаем несколько функций, которые отправляют / запускают имеющуюся у нас функцию authReducer. В качестве примера возьмем функцию signin. Когда эта функция вызывается, она отправляет объект со структурой, как показано ниже.
{
type: 'signin',
payload: {
token: 'some access token here',
email,
},
}
Подобная структура объекта затем станет параметрами действия в функции authReducer. Затем в функции authReducer запускается регистр signin, а затем возвращается новое состояние. Если вы уже знакомы с концепцией редукции, понять это будет намного проще. Если вы этого не сделаете, то перед переходом к реализации redux будет хорошей практикой.
Некоторые заметки, о которых вы могли не знать. В приведенной выше реализации, если вы хотите создать новую функцию, добавьте ее в строку 46. Если вы этого не сделаете, добавленная функция не будет доступна глобально. Во-вторых, если вы хотите создать новый контекст, например BlogContext, он будет иметь ту же структуру, что и AuthContext, который у нас есть. BlogContext будет иметь функцию редуктора, некоторые функции, которые отправляют редуктор, и операторы экспорта, которые используют createDataContext.
Настройка экранов
Создадим нужные нам экраны. Для проблемы аутентификации у нас обычно есть экраны регистрации и входа в систему. Но поскольку функциональность использования контекстного API аналогична, в этом посте я создам только экран входа. Нам нужно 3 экрана для нашего домашнего экрана: Tab1, Tab2 и Tab3. Создайте новую папку в src / screen /, и давайте сначала создадим Signin.js.
Ничего особенного в Signin.js нельзя найти, кроме самого контекста. В строке 10 с помощью хука useContext из React мы можем легко получить доступ к состоянию и его функции в контексте. Возможно, вы помните, что у нас есть три разные функции в AuthContext, но, поскольку нам нужна только функция signin, нам нужно только импортировать signin функция с деструктуризацией объекта. Затем функция signin будет использоваться в строке 31, где при нажатии кнопки входа в систему она запускает функцию с адресом электронной почты и паролем в качестве параметров.
Если вы знакомы с компонентом на основе классов, то указанный выше компонент / экран может быть вам не знаком. Я использую функциональную составляющую и использую хуки для управления внутренним состоянием.
Затем перейдем к экрану Tab1.js.
Здесь нет ничего особенного, кроме строки 6, где мы используем AuthContext. Поскольку нам нужно только состояние электронной почты для его отображения (в строке 11), нам нужно только деструктурировать состояние.
Для Tab2.js, опять же, здесь можно найти только обычные вещи. Следующий.
В строке 7 нам нужна функция signout из AuthContext, чтобы нам нужно было ее деструктурировать. В строке 12 мы используем функцию выхода на кнопку. Поскольку функции не требуются параметры, мы можем просто вызвать ее (в строке 12).
Настройка App.js
Последнее, что нужно сделать, - это изменить наш файл App.js.
Во-первых, поскольку нам нужно перемещаться между экранами регистрации и входа в систему, нам нужно сложить экраны вместе (в строках 13–28). Помните, что у нас нет экранов регистрации. В этом случае я использую экран входа в систему в качестве регистрации. Не стесняйтесь добавить еще один экран регистрации, если хотите.
Затем в строках 31–72 нам нужно связать наши экраны вкладок с помощью Tab Navigator. Здесь нет ничего особенного, но здесь много строк, потому что мы добавили значки во вкладки, которые у нас есть.
Пока что у нас есть authFlow, где экраны регистрации и входа в систему складываются вместе, и homeFlow, где экраны вкладок складываются с помощью навигатора вкладок. В строках 75–99 мы используем authFlow и homeFlow в качестве компонентов и используем троичное выражение, имеет ли состояние в AuthContext токен или нет.
Последнее, что нужно сделать, в строках 101–107, мы экспортируем компонент App, обернутый AuthProvider, который мы получили из оператора импорта в строке 10. Вуаля! Это сделано! Давайте запустим проект с помощью:
npm run android
Конечно, для производственных целей требуются некоторые модификации и корректировки в зависимости от требований. Но в целом мы можем создать аутентификацию и сохранить некоторое глобальное состояние / информацию, которая доступна во всем нашем приложении, используя контекстный API. Спасибо, что прочитали, и увидимся в следующий раз :)
