Question

我有以下应用：

主要 - ＆gt;登录 - ＆gt;收藏夹

在主屏幕上，您可以点击名为＆＃34;收藏夹＆＃34;的按钮。其中：

1）如果您已登录，它将显示您的收藏夹

2）如果您没有登录，它将显示登录屏幕

让我们说有人没有登录并且他们登录到应用程序，这是来自API的密钥并返回一个警告说＆＃34;您现在已登录..＆＃34;

登录后返回主屏幕，如果他们点击＆＃34;收藏夹＆＃34;它仍会显示登录屏幕。他们必须关闭应用程序并重新启动应用程序才能使登录生效。

确保他们不必继续登录的最佳方法是什么？

这是主文件：

  renderView() {


    if(this.state.token != null)
    {
        var data = this.getData();
    }else{
        console.log("token " + this.state.token);
        this.refs.nav.navigator.push({
          title: "Login",
          component: Login,
          rightButtonTitle: 'Cancel',
          passProps: {nav: navigator},
          onRightButtonPress: () => { this.refs.nav.navigator.pop(); }
        });
    }

  }


render() {
    return (

      <NavigatorIOS
          ref="nav"
          style={styles.container}
          initialRoute={{
              title: 'Home',
              component: Main,
              rightButtonTitle: this.renderIcon(),
              onRightButtonPress: () => {
                  this.renderView();
              }

          }} />

    );

  }

getData() {

  var query = urlForQueryAndPage('token', this.state.token, 1);

  fetch(query)
    .then(response => response.json())
    .then(json => this._handleResponse(json.response))
    .catch(error =>
      this.setState({
        isLoading: false,
        message: 'Something bad happened ' + error
    }));
}

这是主文件并检查如果存在令牌，它将导航到收藏夹，否则它将导航到登录。

我在Login.js中的Handle登录：

    handleLogin(reply) {

      if(reply.body.response == 'true')
      {
          this.setServerKey(reply.body.key);
          AlertIOS.alert(
              "Login",
              "You are now signed in. Please go back to access your favourites!"
          );
      }else{

        AlertIOS.alert(
            "Login",
            "Wrong username/password. Please try again!"
        );

      }

  }

如您所见，登录只会弹出一个。但我需要以某种方式刷新主屏幕，以确保收藏夹显示而无需用户重新登录。

Answer 1

登录后避免重新登录

let token;

constructor(props) {
  super(props);
  this.checkToken();
}

async checkToken() {
  try {
    const value = await AsyncStorage.getItem('@MySuperStore:token');
    if (value !== null){
      token = value;
    } 
  } catch (error) {
    // Error getItem from AsyncStorage
  }
}

renderView() {
  if(token != null) {
    var data = this.getData();
  } else {
    //re-check because constructor only run once
    this.checkToken();
    if (token) {
      We have data!! therefore we getData() and redirect to favourites page
    } else {
      this.refs.nav.navigator.push({
        title: "Login",
        component: Login,
        rightButtonTitle: 'Cancel',
        passProps: {nav: navigator},
        onRightButtonPress: () => { this.refs.nav.navigator.pop(); }
      });
    }
  }
}

如果您可以以持久方式而不是以易失性状态保存令牌，那么您可以检索该值并在第一次获取后进行检查。

在我看来，我有两种方法可以持续保存令牌。

AsyncStorage

首先，检查您的令牌是否存在于AsyncStorage
中

try {
  const value = await AsyncStorage.getItem('@MySuperStore:token');
  if (value !== null){
    // We have data!! therefore we redirect to favourites page
  } else {
    // call getData() and handleLogin()
    // remember setItem token to AsyncStorage
    await AsyncStorage.setItem('@MySuperStore:key', token);
  }
} catch (error) {
  // Error retrieving data or setItem to AsyncStorage
}

Redux和redux-persist

您可以从redux存储中检索由redux-persist持久存储的令牌，但如果您想了解并实现redux，这可能会非常耗时，但这是值得的。

React Native - 刷新屏幕

1 个答案:

登录后避免重新登录