Question

我以前在android中开发过，我曾经使用过SharePreference来存储用户令牌。 ios和android有什么可用的原生作用吗？

Answer 1

如果您使用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

Answer 2

作为对其他答案的补充，您可能需要考虑在存储时加密用户设备上的令牌。

因此，除了通过AsyncStorage存储它之外，您可能还想使用类似：react-native-keychain的东西来加密它。

Answer 3

您可能想要使用AsyncStorage

Answer 4

以下是在React Native中存储持久数据的一些方法：

async-storage存储未加密的键值数据。不要使用异步存储来存储令牌，机密和其他机密数据。务必使用Async Storage来保持Redux状态，GraphQL状态并存储应用程序范围的全局变量。
react-native-keychain将用户名/密码组合以字符串格式存储在安全存储中。存储/访问时使用JSON.stringify / JSON.parse。
react-native-sensitive-info-对于iOS安全，但对Android使用Android共享首选项（默认情况下不安全）。但是，有fork）使用Android密钥库。
redux-persist-sensitive-storage-包装react-native-sensitive-info

有关React Native Storage & Security

的更多信息

Answer 5

使用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'

Answer 6

从React Native Expo尝试这个示例

注意：此示例用于未加密的使用，因此，如果您想要安全存储，请访问此页面获取有关nore信息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

如何以原生方式存储令牌？

6 个答案: