如何使用 AsyncStorage 和 React Native 来管理登录

Posted 2023-05-07

【中文标题】如何使用 AsyncStorage 和 React Native 来管理登录

【英文标题】：How to use AsyncStorage with React Native to manage a login

【发布时间】：2019-08-03 07:56:43

【问题描述】：

我是初学者，我在我的应用程序中创建了一个登录屏幕（实际上是使用 React Native），我尝试使用 AsyncStorage 管理登录以进入应用程序的其余部分。但是我可以使用已经使用 const 定义的用户/密码进行登录。

这个问题的想法是让 AsynStorage 作为我的应用程序的后端。你知道，就像我的数据库一样，要避免使用 Firebase 或其他 DBS。这可能吗？

我这样做是为了检查用户和密码，只是为了测试登录，但实际上该应用程序没有“直到这里的后端”

我想使用异步创建一个数据库，拥有用户信息和类似的东西。再说一次，我还是个初学者，不确定这是否可行。

class LoginScreen extends React.Component 
  constructor(props) 
    super(props);
    this.state =  email: "", password: "" ;
  

  static navigationOptions = 
    header: null
  ;

  render() 
    return (
      <View style=styles.container>
        ...
        <TouchableOpacity style=styles.loginButton onPress=this._signin>
          <Text style=styles.loginButtonText> Login </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress=this._signup>
          <Text style=styles.createAccount> Or create an account </Text>
        </TouchableOpacity>
      </View>
    );
  

  _signin = async () => 
    if (
      userInfo.email === this.state.email &&
      userInfo.password === this.state.password
    ) 
      await AsyncStorage.setItem("logged", "1");
      this.props.navigation.navigate("App");
     else 
      alert("Try again");
    
  ;

  _signup = async () => 
    this.props.navigation.navigate("Authentication");
  ;

然后我按以下方式制作了一个注册屏幕，在这里我想将一个用户添加到一个不存在的数据库中，仍在思考如何去做。

export default class SignUpScreen extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      nombre: "",
      username: "",
      email: "",
      cellphone: "",
      password: "",
      email: "",
      cellphone: "",
      password: ""
    ;
  

  render() 
    return (
      <View style=styles.container>
        <Image style=styles.logo source=require("../images/user.png") />

        <Text style=styles.welcome> ¡Creemos tu cuenta! </Text>

        <TextInput
          style=styles.input
          placeholder="Full name"
          autoComplete="nombre"
          onChangeText=nombre => this.setState( nombre )
          value=this.state.nombre
        />

        <TextInput
          style=styles.input
          placeholder="Username"
          onChangeText=username => this.setState( username )
          value=this.state.username
        />

        <TextInput
          style=styles.input
          placeholder="email"
          autoComplete="email"
          autoCapitalize="none"
          keyboardType="email-address"
          onChangeText=email => this.setState( email )
          value=this.state.email
        />

        <TextInput
          style=styles.input
          placeholder="Cellphone"
          autoComplete="tel"
          keyboardType="phone-pad"
          maxLength=10
          onChangeText=cellphone => this.setState( cellphone )
          value=this.state.cellphone
        />

        <TextInput
          style=styles.input
          placeholder="Pass"
          onChangeText=password => this.setState( password )
          secureTextEntry=true
          autoCapitalize="none"
          value=this.state.password
        />

        <TouchableOpacity
          style=styles.loginButton
          onPress=this._createAccount
        >
          <Text style=styles.loginButtonText> Create account </Text>
        </TouchableOpacity>

        <TouchableOpacity onPress=this._goback>
          <Text style=styles.createAccount> Or singin </Text>
        </TouchableOpacity>
      </View>
    );
  

  _goback = async () => 
    this.props.navigation.navigate("Auth");
  ;

  _createAccount = async () => 
    const arrayData = [];

    if (
      this.state.nombre &&
      this.state.username &&
      this.state.email &&
      this.state.cellphone &&
      this.state.password !== null
    ) 
      const data = 
        nombre: this.state.nombre,
        username: this.state.username,
        email: this.state.email,
        cellphone: this.state.cellphone,
        password: this.state.password
      ;
      arrayData.push(data);
      try 
        AsyncStorage.getItem("database_form").then(value => 
          if (value !== null) 
            const d = JSON.parse(value);
            d.push(data);
            AsyncStorage.setItem("database_form", JSON.stringify(d)).then(
              () => 
                this.props.navigation.navigate("Auth");
              
            );
           else 
            AsyncStorage.setItem(
              "database_form",
              JSON.stringify(arrayData)
            ).then(() => 
              this.props.navigation.navigate("Auth");
            );
          
        );
       catch (err) 
        console.log(err);
      
     else 
      alert("Todos los campos son obligatorios");
    
  ;

而且我不知道如何在登录屏幕的 if 中询问是否与我在注册屏幕中输入的用户匹配的任何新用户。不确定我是否错误地执行了此操作。

我只想检查 AsyncStorage 是否与用户在登录时写入的信息匹配。

另外，在尝试创建新帐户时，请询问是否存在具有相同信息的现有用户，以避免重复。

提前致谢。

【问题讨论】：

检查reactnavigation.org/docs/en/auth-flow.html

我已经检查过了，我的代码可以正确登录和注销。但我不知道如何验证另一个用户的登录，我只验证一个用 const 制作的用户

您的意思是您的 AsyncStorage 中拥有所有用户信息，并且您只需检查输入的数据是否与 1 of em 匹配？

这里的问题是我不知道如何从登录的if中询问AsyncStorage拥有的数据。在登录时，我只询问我用 const 创建的用户

【参考方案1】：

您需要在状态中获取用户输入的值，并在按钮单击事件中进行验证。

<Input placeholder='LogIn Id' onChangeText=(username) => this.setState( username: username ) />
<TouchableOpacity  onPress=() => this.onclick()>
<Text>LogIn</Text>
</TouchableOpacity>

在 onclick 事件中，您需要检查状态值。

【讨论】：

我不知道如何访问 AsyncStorage 的信息。你能帮我多一点吗？请。

您需要先将其设为全局变量，然后导入到任何文件中。 import React from "react"; export const AuthContext = React.createContext();

【参考方案2】：

如何使用异步存储登录：

第0步：const AuthContext = React.createContext(); 第 1 步：创建 AuthContex const authContext = React.useMemo() 第二步：<AuthContext.Provider value=authContext>.....</AuthContext.Provider>