Лучший способ для постоянной аутентификации пользователя в реагирующем

Question

Я пытаюсь написать код для входа пользователя в систему и сохранить его на своем языке.Я обнаружил, что persist-redux и реагирует на навигацию lib.

Являются ли они лучшими библиотеками для проверки подлинности?Могу ли я использовать реагирующую навигацию вместо persist-redux?Можете ли вы предложить мне хороший учебник для реализации этого?

Answer 1

Для входа пользователя с токеном вы можете использовать AsyncStorage, сервис, являющийся частью React Native, который позволяет нам хранить небольшие фрагменты данных в телефоне пользователя.

Таким образом, даже если пользователь закрывает приложение или выключает свое мобильное устройство, что приводит к сбросу информации из нашего магазина Redux, который находится в памяти JavaScript, где нет постоянства, мы можем увидеть, если токен существует, глядя в AsyncStorage.

Таким образом, если пользователь войдет в систему хотя бы один раз и токен будет сохранен в AsyncStorage, это позволит вам сохранить токен от различных применений или перезагрузок вашего приложения. Таким образом, чтобы импортировать его, выглядело бы что-то вроде этого, например:

import { AsyncStorage } from "react-native";
import { FACEBOOK_LOGIN_SUCCESS } from "./types";

export const facebookLogin = () => {};

AsyncStorage работает немного как localStorage в вашем браузере. AsyncStorage предоставляет две разные функции, первая называется AsyncStorage.setItem();. Это может содержать определенный ключ в качестве первого аргумента и часть данных, которые мы хотим сохранить в качестве второго аргумента, AsyncStorage.setItem('fb_token', token);. Вторая функция - AsyncStorage.getItem();, и мы передаем ключ, под которым вы ее предварительно сохранили, AsyncStorage.getItem('fb_token');.

Когда вы хотите сохранить элемент на устройстве, вы говорите, что здесь есть токен и строка, чтобы указать, под каким ключом мы хотим сохранить его.

Ключ позволяет нам иметь отдельное хранилище для сохранения в уникальном месте и извлекать его позже, взглянув на тот же самый точный ключ, на примере 'fb_token'.

AsyncStorage ведет себя немного иначе, чем localStorage, в том смысле, что это асинхронная операция, поэтому считывание его из хранилища занимает некоторое время.

AsyncStorage вернет Обещание после извлечения или успешного сохранения записи. Поэтому ваш код должен быть настроен на работу с Promises при получении или сохранении с помощью AsyncStorage.

Теперь я использую вход в Facebook в качестве примера в своем коде, чтобы подчеркнуть, что если вы используете аутентификацию сторонних сервисов, таких как Facebook, вы будете иметь дело с еще некоторыми Обещаниями в дополнение к AsyncStorage один.

Дело в том, что ваш код может очень быстро запутаться. Чтобы справиться с этим, вы можете использовать синтаксис ES7 Async / Await, который используется для изящной обработки обещаний.

Итак, с синтаксисом .then() он начал бы выглядеть так:

asynchronousOperation = () => {
  myRequest().then((result) => console.log(result));
}

С синтаксисом Async / Await это будет выглядеть так:

asynchronousOperation = async () => {
  let result = await myRequest();
  console.log(result);
}

Таким образом, на практике все началось бы с вашего создателя действия:

import { AsyncStorage } from "react-native";
import { FACEBOOK_LOGIN_SUCCESS } from "./types";

export const facebookLogin = () => {
  let token = await AsyncStorage.getItem("fb_token");
  if (token) {
    // Dispatch an action saying FB login is successful
  } else {
    // Start up Facebook login process
  }
};

Теперь создатели действий предполагают, что вы возвращаете объект действия немедленно, верно, но AsyncStorage является асинхронным по своей природе, поэтому нам нужно что-то вроде Redux Thunk, что на практике это будет выглядеть так:

import { AsyncStorage } from "react-native";
import { FACEBOOK_LOGIN_SUCCESS } from "./types";

export const facebookLogin = () => async dispatch => {
  let token = await AsyncStorage.getItem("fb_token");
  if (token) {
    // Dispatch an action saying FB login is successful
  } else {
    // Start up Facebook login process
  }
};

Answer 2

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

Вы можете использовать реагирующую навигацию как наиболее рекомендуемую библиотеку. Вот ваши настройки навигации.

import { createSwitchNavigator, createStackNavigator, createAppContainer } from 'react-navigation';

// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

и вы можете кодировать следующее на экране авторизации

import React from 'react';
import {
  ActivityIndicator,
  AsyncStorage,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';

class AuthLoadingScreen extends React.Component {
  constructor(props) {
    super(props);
    this._bootstrapAsync();
  }

  // Fetch the token from storage then navigate to our appropriate place
  _bootstrapAsync = async () => {
    const userToken = await AsyncStorage.getItem('userToken');

    // This will switch to the App screen or Auth screen and this loading
    // screen will be unmounted and thrown away.
    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
  };

  // Render any loading content that you like here
  render() {
    return (
      <View>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}

для получения дополнительной информации, вы всегда можете посетить эту ссылку.

https://reactnavigation.org/docs/en/auth-flow.html