登录成功后更改页面

Question

So I tried to navigate the login page to redirect to another page if the condition is a success, but the problem is although is working but when I type the wrong password the page still redirect this is my function:

 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);
    });
  }
}

And this is the jsx:

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

So this is the navigation route that I put in 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

I think that change the response handler. Maybe like this

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

Answer 2

This because you haven't check whether the password status of the response, Do something like below, For correct passwords, send a response like this {success:true} and for incorrect passwords {success:false} and do the below modification in you front-end code

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

Answer 3

The issue is with your response handling mechanism. According to this weather response is success or false you will navigate into res .

For that you need to check the JSON Response which comes from API like this

//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);
  });