登录成功后更改页面

Question

因此，如果条件成功，我尝试导航登录页面以重定向到另一个页面，但问题是虽然可以正常工作但是当我输入错误的密码时页面仍然重定向这是我的功能：

 getDataUsingPost(){
  const {navigate} = this.props.navigation
    //POST json 
    var dataToSend = {
    username: this.state.username, 
    password: this.state.password, 
    imei: this.state.imei
  };
    //making data to send on server
    var formBody = [];
    for (var key in dataToSend) {
      var encodedKey = encodeURIComponent(key);
      var encodedValue = encodeURIComponent(dataToSend[key]);
      formBody.push(encodedKey + "=" + encodedValue);
    }
    formBody = formBody.join("&");
    //POST request 
    fetch('https://appshlw.oppomobile.id/api/login', {
      method: "POST",//Request Type 
      body: formBody,//post body 
      headers: {//Header Defination 
        'Content-Type': 'application/x-www-form-urlencoded',
        'key': 123456789
      },
    })
    .then((response) => response.json())
    //If response is in json then is success
    .then((responseJson) => {
        alert(JSON.stringify(responseJson));
        navigate('SecondPage')
    })
    //If response is not in json then in error
    .catch((error) => {
      alert(JSON.stringify(error));
      console.error(error);
    });
  }
}

这是 jsx：

<Button title='Login' onPress={this.getDataUsingPost.bind(this)}/>

所以这是我放在 App.js 中的导航路线：

//This is an example code for Navigator// 

import { createStackNavigator } from 'react-navigation-stack'
import { createAppContainer } from 'react-navigation';

import FirstPage from './pages/FirstPage';
import SecondPage from './pages/SecondPage';
import Login from './pages/Login'

const App = createStackNavigator({

    FirstPage: { screen: FirstPage }, 

    SecondPage: { screen: SecondPage }, 

    Login: {screen: Login}
  },
  {
    initialRouteName: 'Login',
  }
);
export default createAppContainer(App);

Answer 1

我认为改变响应处理程序。 也许像这样

.then(function(response) {
    return response.json();
}).then((resJson) => {
  if(resJson.status == 'success'){ //check your response is correct
    navigate('SecondPage')
  }
})

Answer 2

这是因为您没有检查响应的密码状态，请执行以下操作，对于正确的密码，发送这样的响应{success:true}和不正确的密码{success:false}并在您中进行以下修改前端代码

.then((responseJson) => {
     alert(JSON.stringify(responseJson));
     if(responseJson.success){ 
        navigate('SecondPage')
     } else {
       //Handle Login failed path 
     }   
})

Answer 3

问题在于您的响应处理机制。 根据这个天气响应是成功还是错误，您将导航到res 。

为此，您需要检查来自这样的API的JSON 响应

//POST request
fetch("https://appshlw.oppomobile.id/api/login", {
  method: "POST", //Request Type
  body: formBody, //post body
  headers: {
    //Header Defination
    "Content-Type": "application/x-www-form-urlencoded",
    key: 123456789
  }
})
  .then(response => response.json())
  //If response is in json then is success
  .then(response => {
    alert(JSON.stringify(response));
    // navigate("SecondPage");

    //Check the response according to your API response
    if (response.success == "true") {
      //Verification Passed -> Navigate
      navigate("SecondPage");
    } else {
      //Verificastion Failed -> Do anything according to your app
    }
  })
  //If response is not in json then in error
  .catch(error => {
    alert(JSON.stringify(error));
    console.error(error);
  });