Question

我正在尝试编写用于用户登录的代码，并将其保存在react-native中。我找到了persist-redux，并对导航库做出了反应。

它们是进行身份验证的最佳库吗？我可以使用反应导航代替persist-redux吗？您能为我推荐实现该目标的好教程吗？

Answer 1

请勿使用AsyncStorage存储凭证！

根据React Native's security overview，AsyncStorage不应用于存储敏感数据，因为它们未经加密。

异步存储是用于React Native的社区维护模块，提供了异步，未加密的键值存储。应用之间不共享异步存储：每个应用都有自己的沙箱环境，无法访问其他应用中的数据。

Async Storage dos and don'ts table

那我应该怎么用？

您可以使用以下任何一种可能性：

expo-secure-store
react-native-keychain
react-native-sensitive-info：
- Secure for iOS
- 在v6及更高版本中为Android安全。
redux-persist-sensitive-storage-将react-native-sensitive-info包装为Redux。

来源：https://reactnative.dev/docs/security

Answer 2

您可以保存在登录AsyncStorage时获得的身份验证令牌，并在应用启动时检查是否使用某些api来验证令牌。如果有效，则可以导航到应用程序的主仪表板或所需的任何屏幕。否则，如果无效，您可以导航到登录屏幕。

您可以肯定地使用react-navigation作为其最推荐的库。这是您的导航设置。

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

Answer 3

对于使用令牌登录的用户，您可以使用AsyncStorage，这是React Native的一部分，该服务使我们能够在用户电话中存储少量数据片段。

因此，即使用户关闭了应用程序或关闭了其移动设备，这会导致从我们的Redux存储区中转储信息，而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将返回一个Promise。因此，在使用AsyncStorage进行检索或保存时，必须将您的代码设置为可与Promises一起使用。

现在，我以在代码中使用Facebook登录为例来说明，如果您正在使用与Facebook之类的第三方服务进行身份验证，那么除AsyncStorage个。

关键是您的代码很快就会变得混乱。为了解决这个问题，您可以使用ES7 Async / Await语法来优雅地处理Promises。

因此，使用.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
  }
};

在React-Native中进行持久性用户身份验证的最佳方法

3 个答案: