React原生AsyncStorage

Question

我不知道如何使AsyncStorage工作。我使用的是反应本机路由器流量。

基本上我有3页：

FirstPage

export default class Authentication extends Component {

   render() {
    return (
      ..........


          <TouchableOpacity
            style ={[style.button, style.buttonOK]}
            onPress={() => Actions.login() }>
            <Text style={style.buttonTesto}>LOGIN</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style ={[style.button, style.buttonOK]}
            onPress={() => Actions.signup() }>
            <Text style={style.buttonTesto}>SIGNUP</Text>
          </TouchableOpacity>

        </View>
      </View>

    );
  }
}

登录

login() {
    let ctrl = true;
    ......
    if (ctrl) {

      let formdata = new FormData();
      const identity = {
        AppName: {
          Username: this.state.username,
          Password: this.state.password
        }
      };

      formdata.append("Identity", JSON.stringify(identity));
      fetch(APILINK , {
        method: "POST",
        headers: {
          "Content-Type": "multipart/form-data"
        },
        body: formdata
      })
        .then(response => response.json())
        .then(responseData => {
          if (responseData.Error) {
            .......
          } else {
            global.utente = new Utente(responseData);
            Actions.homepageutente();
          }
        })
        .catch(err => alert("err:" + err));
    }
  }

Utente

export default class Utente {
  constructor(data) {
    Utente.saveUtenteLoggato(data);
    this._data = data;
    ....
    );
  }
  get data() {
    return this._data;
  }
  //there is a function for the signup there//
  .......

  static async saveUtenteLoggato(value) {
    try {
      await AsyncStorage.setItem("@UtenteLoggato", JSON.stringify(value));
    } catch (error) {
      console.log(error.message);
    }
  }

  static async getUtenteLoggato() {
    try {
      return await AsyncStorage.getItem("@UtenteLoggato");
    } catch (error) {
      console.log(error.message);
      return null;
    }
  }

  static async clearUtenteLoggato() {
    try {
      global.utente = null;
      await AsyncStorage.removeItem("@UtenteLoggato");
    } catch (error) {
      console.log(error.message);
      return null;
    }
  }
}

因此，在Utente中，我创建了Asyncstorage函数，但是当我在后台关闭应用程序(例如)以保持登录活动时，我不知道该如何做。现在，如果我回到应用程序，我应该再做一次登录。我该怎么解决呢？

编辑起始页

class Starting extends Component {
    constructor(props)
    {
      super(props)
      this.state = {
        loading: true
      }
    }

  componentWillMount() {
    Utente.getUtenteLoggato()
      .then(dataUtenteLoggato => {
        if (dataUtenteLoggato !== null) {
          global.utente = new Utente(JSON.parse(dataUtenteLoggato));
        } else {
          Actions.authentication();
        }
      })
      .catch(err => {
        console.log(err);
      })
      .finally(() => {
        this.setState({ loading: false });
      });
  }

  render() {
    return(
      <View style={style.container}>
        <Spinner visible={this.state.loading} textContent={"Loading..."} textStyle={{color: '#FFF'}} />
      </View>
    );
    }
}

Answer 1

您可以在componentWillMount中实现splash组件并检查auth。例如-从AsyncStorage获取数据，然后执行请求以检查用户是否经过身份验证并获取用户详细信息。如果auth数据(例如auth令牌)在存储中缺失，或者服务器抛出auth错误(在令牌无效或过期时)，则将用户重定向到登录屏幕，否则将用户标记为身份验证并显示主屏幕。