Как хранить токены в реакции родной?

Ответ 1

Возможно, вы захотите использовать AsyncStorage

Изменить:

Для всех, кто указал, что AsyncStorage не является безопасным, пожалуйста, обратитесь к этой записи.

Ответ 2

Если вы используете create-react-native-app или exp, вы можете использовать Expo.SecureStore для хранения вашего токена.

import {SecureStore} from 'expo';

await SecureStore.setItemAsync('secure_token','sahdkfjaskdflas$%^&');
const token = await SecureStore.getItemAsync('secure_token');
console.log(token); // output: sahdkfjaskdflas$%^&

Подробности: https://docs.expo.io/versions/latest/sdk/securestore

Ответ 3

В дополнение к другому ответу вы можете рассмотреть возможность шифрования токена на пользовательском устройстве при его сохранении.

Поэтому, в дополнение к хранению через AsyncStorage, вы можете использовать что-то вроде: Reaction-native-keychain для шифрования на устройстве.

Ответ 4

использовать expo-secure-store

// to install it 'expo install expo-secure-store'

import * as SecureStore from 'expo-secure-store';

const setToken = async (token) => {
    await SecureStore.setItemAsync('secure_token', token);
};

const getToken = async () => {
    return await SecureStore.getItemAsync('secure_token');
};

setToken('#your_secret_token');
getToken().then(token => console.log(token)); // output '#your_secret_token'

Ответ 5

Попробуйте этот пример из React Native Expo

Примечание. Этот пример предназначен для незашифрованного использования, поэтому, если вы хотите использовать безопасное хранилище, посетите эту страницу для получения дополнительной информации https://docs.expo.io/versions/latest/sdk/securestore

Ссылка: незашифрованный https://reactnavigation.org/docs/en/auth-flow.html#set-up-our-navigators зашифрованный https://docs.expo.io/versions/latest/sdk/securestore

class SignInScreen extends React.Component {
  static navigationOptions = {
    title: 'Please sign in',
  };

  render() {
    return (
      <View>
        <Button title="Sign in!" onPress={this._signInAsync} />
      </View>
    );
  }

  _signInAsync = async () => {
    await AsyncStorage.setItem('userToken', 'abc');
    this.props.navigation.navigate('App');
  };
}

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome to the app!',
  };

  render() {
    return (
      <View>
        <Button title="Show me more of the app" onPress={this._showMoreApp} />
        <Button title="Actually, sign me out :)" onPress={this._signOutAsync} />
      </View>
    );
  }

  _showMoreApp = () => {
    this.props.navigation.navigate('Other');
  };

  _signOutAsync = async () => {
    await AsyncStorage.clear();
    this.props.navigation.navigate('Auth');
  };
}

// More code like OtherScreen omitted for brevity