如何在react native中存储tokens?

lpwwtiir  于 2023-10-22  发布在  React
关注(0)|答案(7)|浏览(181)

我以前在android中开发过,我曾经使用SharePreference来存储用户令牌。react native中有没有这样的东西可以同时在ios和android上使用?

kq0g1dla

kq0g1dla1#

如果您使用的是create-react-native-appexp,则可以使用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
2020年12月更新:
SecureStore模块现在变为expo-secure-store

import * as SecureStore from 'expo-secure-store';
    
    await SecureStore.setItemAsync('secure_token','sahdkfjaskdflas$%^&');
    const token = await SecureStore.getItemAsync('secure_token');
    console.log(token); // output: sahdkfjaskdflas$%^&
xmakbtuz

xmakbtuz2#

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

  • async-storage存储未加密的键值数据。不要使用异步存储来存储令牌、秘密和其他机密数据。使用Async Storage来持久化Redux状态、GraphQL状态和存储全局应用范围的变量。
  • react-native-keychain将用户名/密码组合以字符串格式存储在安全存储器中。当你存储/访问它时,使用JSON.stringify/JSON.parse。
  • react-native-sensitive-info-对于iOS是安全的,但对于Android使用Android共享首选项(默认情况下不安全)。但是有一个fork)使用Android Keystore。
  • redux-persist-sensitive-storage - wraps react-native-sensitive-info

关于React Native Storage & Security的更多信息

q5lcpyga

q5lcpyga3#

作为对另一个答案的补充,您可能需要考虑在存储令牌时在用户设备上对其进行加密。
因此,除了通过AsyncStorage存储它之外,您可能还需要使用以下内容:react-native-keychain在设备上加密。

kq4fsx7k

kq4fsx7k4#

您可能需要使用AsyncStorage
AsyncStorage已经过时了。可以使用https://github.com/react-native-community/async-storage

编辑:

对于所有指出AsyncStorage不安全的人,请参考此post

ulydmbyx

ulydmbyx5#

使用安全存储

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

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

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

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

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

p8ekf7hl6#

根据React Native文档:
React Native不附带任何存储敏感数据的方式。但是,已有针对Android和iOS平台的解决方案。
但这里有一些替代品使用iOS -钥匙串服务和Android -安全共享首选项。参见以下文档
此外,这里有一些开箱即用的选项:

q5iwbnjs

q5iwbnjs7#

这个例子来自React Native Expo
注意:此示例用于未加密的用途,因此如果您想要安全存储,请访问此页面以获取更多信息https://docs.expo.io/versions/latest/sdk/securestore
参考:Unencrypted https://reactnavigation.org/docs/en/auth-flow.html#set-up-our-navigators Encrypted 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

相关问题