Javascript 需要一些想法在React本机应用程序中实现异步存储以保持用户登录应用程序

各自的StackOverflow开发者社区。我是react native开发新手，大约一个月前，我开始在react native中学习和实现应用程序，现在我陷入了异步存储的困境。实际上，我使用PHPWeb服务在我的应用程序中登录用户，mysql就是我使用的数据库。现在我想让用户登录到我的应用程序，就像用户成功登录一样，然后如果用户关闭应用程序，应用程序存储他的用户名和密码，下次用户打开应用程序时，他无需再次登录。应用程序直接向他显示主屏幕我读异步存储负责这类工作需要帮助实现这类功能 我按照本教程进行登录：

从“React”导入React，{Component}； 从“react native”导入{样式表、文本输入、视图、警报、按钮、文本、异步存储}； //导入堆栈导航器库以添加多个活动。 从“react navigation”导入{createStackNavigator，createAppContainer}； //创建登录活动。 类LoginActivity扩展了组件{ //设置登录活动标题。 静态导航选项= { 标题：“物流活动”， }; 构造器{ 超级作物 此.state={ 用户电子邮件：， 用户密码： } } UserLoginFunction==>{ const{UserEmail}=this.state； const{UserPassword}=this.state； 取回http://192.168.0.107/loginrn/User_Login.php', { 方法：“POST”， 标题：{ “接受”：“应用程序/json”， “内容类型”：“应用程序/json”， }, 正文：JSON.stringify{ 电子邮件：UserEmail， 密码：UserPassword //console.log'UserEmail' } }.thenresponse=>response.json .thenresponseJson=>{ //如果服务器响应消息与数据匹配 ifresponseJson==“数据匹配” { //然后打开配置文件活动并向配置文件活动发送用户电子邮件。 this.props.navigation.navigate'Second'，{Email:UserEmail}； } 否则{ Alert.alertresponseJson； } }.catcherror=>{ 控制台错误； }; } 渲染{ 回来 用户登录表单 this.setState{UserEmail} //使下线透明。 “透明的” style={style.TextInputStyleClass} /> this.setState{UserPassword} //使下线透明。 “透明的” style={style.TextInputStyleClass} secureTextEntry={true} /> ; } } //创建配置文件活动。 类ProfileActivity扩展组件 { //设置配置文件活动标题。 静态导航选项= { 标题：“活动简介”， }; 提供 { const{goBack}=this.props.navigation； 回来 {this.props.navigation.state.params.Email} goBacknull}/> ; } } const AppNavigator=createStackNavigator { 第一：{screen:LoginActivity}， 第二：{screen:ProfileActivity} };

---

导出默认createAppContainerAppNavigator 欢迎来到Stackoverflow:

首先，如果您不熟悉React Native，请遵循所有必要的文档部分

不管怎样，作为初学者，你的代码是可以的。。但是事情是在React Native中的，正如您所知，我们正在为每个组件/屏幕/函数实现类。在您的代码中，您试图在一个文件中的一个代码库中完成所有应用程序功能。这不是最好的做法。尽可能多地学习最佳实践：

现在让我们继续讨论你的问题

在您的场景中，只需添加React本机本地存储，即可轻松维护用户会话。一旦用户成功登录，您需要在用户设备中设置一些常量变量，我们可以在启动应用程序后检查这些变量-这是一个简单的场景

让我们现在开始编码

首先，您需要安装@react native community提供的AsyncStorage

如果您使用的是纱线，请运行此纱线添加@react native community/async storage 或者，如果您正在使用npm，请运行此npm i-s@react native community/async storage

如果您使用的是React原生版本0.60或更高版本，则无需手动链接npm包：

若你们在android上运行，你们可以正常运行，但你们在iOS上运行，你们需要安装pod

cd ios和pod安装 现在使用导入异步存储

从“@react native community/async storage”导入异步存储； 之后，您需要在用户成功登录后保存用户电子邮件

AsyncStorage.setItem'userEmail'，JSON.stringifyUserEmail； 现在，您可以检查逻辑-如果本地存储有用户电子邮件，则用户已登录

但在这里，一旦用户使用AsyncStorage.clear点击注销按钮，您就需要清除本地存储

最终代码

---

如果您有任何疑问，请随时提问：快乐编码：

欢迎来到Stackoverflow:

首先，如果您不熟悉React Native，请遵循所有必要的文档部分

不管怎样，作为初学者，你的代码是可以的。。但是事情是在React Native中的，正如您所知，我们正在为每个组件/屏幕/函数实现类。在您的代码中，您试图在一个文件中的一个代码库中完成所有应用程序功能。这不是最好的做法。尽可能多地学习最佳实践：

现在让我们继续讨论你的问题

在您的场景中，只需添加React本机本地存储，即可轻松维护用户会话。一旦用户成功登录，您需要在用户设备中设置一些常量变量，我们可以在启动应用程序后检查这些变量-这是一个简单的场景

让我们现在开始编码

首先，您需要安装@react native community提供的AsyncStorage

如果您使用的是纱线，请运行此纱线添加@react native community/async storage 或者，如果您正在使用npm，请运行此npm i-s@react native community/async storage

如果您使用的是React原生版本0.60或更高版本，则无需手动链接npm包：

若你们在android上运行，你们可以正常运行，但你们在iOS上运行，你们需要安装pod

cd ios和pod安装 现在使用导入异步存储

从“@react native community/async storage”导入异步存储； 之后，您需要在用户成功登录后保存用户电子邮件

AsyncStorage.setItem'userEmail'，JSON.stringifyUserEmail； 现在，您可以检查逻辑-如果本地存储有用户电子邮件，则用户已登录

但在这里，一旦用户使用AsyncStorage.clear点击注销按钮，您就需要清除本地存储

最终代码

---

如果您有任何疑问，请随时提问：快乐编码：

本地存储凭据并不安全。您应该考虑像这样实现一个基于令牌的认证：

---

每次用户执行需要身份验证的操作时，您都应该将令牌作为授权头传递，并在服务器端对其进行验证。文档说明了如何实现它。这很容易实现。

在本地存储凭据并不安全。您应该考虑像这样实现一个基于令牌的认证：

---

每次用户执行需要身份验证的操作时，您都应该将令牌作为授权头传递，并在服务器端对其进行验证。文档说明了如何实现它。这很容易，也很现实。

脱帽致敬，你救了我一天appreciated@HaseebJavaid很高兴它能帮上忙：别忘了给这个投票，并标记为你问题的正确答案：脱帽致敬，你救了我的一天appreciated@HaseebJavaid很高兴它能帮上忙：别忘了将此投票并标记为您问题的正确答案：

import React, { Component } from "react";

import {
  StyleSheet,
  TextInput,
  View,
  Alert,
  Button,
  Text,
  AsyncStorage
} from "react-native";

// Importing Stack Navigator library to add multiple activities.
import { createStackNavigator, createAppContainer } from "react-navigation";

//Import Async Storage - Local Storage
import AsyncStorage from "@react-native-community/async-storage";

// Creating Login Activity.
class LoginActivity extends Component {
  // Setting up Login Activity title.
  static navigationOptions = {
    title: "LoginActivity"
  };

  constructor(props) {
    super(props);

    this.state = {
      UserEmail: "",
      UserPassword: ""
    };
  }

  //Check If the user is already logged or not
  componentDidMount() {
    //Get User Email From Local Storage
    AsyncStorage.getItem("userEmail").then(data => {
      if (data) {
        //If userEmail has data -> email
        this.props.navigation.navigate("Second", { Email: JSON.parse(data) }); //Navigate to Second Screen
      }
    });
  }

  UserLoginFunction = () => {
    const { UserEmail } = this.state;
    const { UserPassword } = this.state;

    fetch("http://192.168.0.107/loginrn/User_Login.php", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        email: UserEmail,

        password: UserPassword
        //console.log('UserEmail')
      })
    })
      .then(response => response.json())
      .then(responseJson => {
        // If server response message same as Data Matched
        if (responseJson === "Data Matched") {
          //Save User Details to Local Storage
          AsyncStorage.setItem("userEmail", JSON.stringify(UserEmail));
          //Then open Profile activity and send user email to profile activity.
          this.props.navigation.navigate("Second", { Email: UserEmail });
        } else {
          Alert.alert(responseJson);
        }
      })
      .catch(error => {
        console.error(error);
      });
  };

  render() {
    return (
      <View style={styles.MainContainer}>
        <Text style={styles.TextComponentStyle}>User Login Form</Text>

        <TextInput
          // Adding hint in Text Input using Place holder.
          placeholder="Enter User Email"
          onChangeText={UserEmail => this.setState({ UserEmail })}
          // Making the Under line Transparent.
          underlineColorAndroid="transparent"
          style={styles.TextInputStyleClass}
        />

        <TextInput
          // Adding hint in Text Input using Place holder.
          placeholder="Enter User Password"
          onChangeText={UserPassword => this.setState({ UserPassword })}
          // Making the Under line Transparent.
          underlineColorAndroid="transparent"
          style={styles.TextInputStyleClass}
          secureTextEntry={true}
        />

        <Button
          title="Click Here To Login"
          onPress={this.UserLoginFunction}
          color="#2196F3"
        />
      </View>
    );
  }
}
// Creating Profile activity.
class ProfileActivity extends Component {
  // Setting up profile activity title.
  static navigationOptions = {
    title: "ProfileActivity"
  };

  //logout button click
  logOutAction = () => {
    const { goBack } = this.props.navigation;
    AsyncStorage.clear(); // Clear the Async Storage Before Log out
    goBack(null);
  };

  render() {
    const { goBack } = this.props.navigation;

    return (
      <View style={styles.MainContainer}>
        <Text style={styles.TextComponentStyle}>
          {" "}
          {this.props.navigation.state.params.Email}{" "}
        </Text>

        <Button
          title="Click here to Logout"
          onPress={() => this.logOutAction()}
        />
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  First: { screen: LoginActivity },

  Second: { screen: ProfileActivity }
});
export default createAppContainer(AppNavigator);