Войти через React Native с использованием асинхронного хранилища - PullRequest
Новая
       50

Войти через React Native с использованием асинхронного хранилища

0 голосов
/ 01 июля 2019

Я осуществляю вход в React Native с использованием асинхронного хранилища. Здесь, когда пользователи входят в систему успешно, я сохраняю объект пользователя в асинхронном хранилище, затем я получаю доступ к этой информации, чтобы получить ключ аутентификации для моего запроса API в любое время, когда я хочу выполнить запрос. Когда я вхожу в систему и информация сохраняется в асинхронном хранилище, текущему сеансу приложения не удается получить только что сохраненную информацию, поэтому все мои аутентифицированные запросы не выполняются в этом сеансе. Когда я закрываю приложение и перезапускаю, я могу успешно получить информацию из асинхронного хранилища, сохраненного в предыдущем сеансе, и выполнить успешный аутентифицированный запрос.

Я не знаю, что мне не хватает в моем коде, так как я считаю, что мне нужно обновить или перезагрузить приложение внутренне после успешного входа в систему, но я не знаю, как это сделать в React Native. Любая информация или помощь необходима. Вот мой логин. 

HttpRequest.post('api/login', body)
    .then((response) => response.json())
    .then((responseJson) => {
        if(responseJson.succcode == 201){  //successful login
          var data = responseJson.user;
          data.loggedIn = true;
           AsyncStorage.setItem(USER_DATA, JSON.stringify(data)).then(val => {
                  console.log('just before reload in login')
                  Actions.menu(); //this solves the after login problem as it goes to the next page only after a successful AsyncStorage save
                  this.setState({ procesing: false });
                })
                .catch(err => {
                    this.setState({ procesing: false, error: "Couldn't log you in! Please try again" });
                    //console.log("\nCouldn't save to AsyncStorage: " + err + "\n");
                });
            }
            else{
                 this.setState({ procesing: false, error: "Wrong Username and/or Password! Please try again" });
            }

После входа в систему мой запрос выглядит так: 

//for making a post request
    post:  (url,body) => {
        return fetch(url+'?access-token='+this.state.user.auth_key, {
            method: 'GET',
            headers: {
            Accept: 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded',
            //'Autorization': 'Bearer token2'
            },
        })

но пользовательский объект получен из хранилища Async как 

getUser(){
  return AsyncStorage.getItem("USER_DATA").then(value => {
        if(JSON.parse(value) == null) {
           return false;

        } else {
            return JSON.parse(value)
        }
    });
 },

Любая информация, идеи, предлагаемые решения приветствуются

1 Ответ

0 голосов
/ 02 июля 2019

Если вы получаете информацию правильно, вы можете передать информацию на следующий экран или использовать асинхронный репозиторий, как он есть сейчас.

Если использовать навигацию 

HttpRequest.post('api/login', body)
    .then((response) => response.json())
    .then((responseJson) => {
        if(responseJson.succcode == 201){  //successful login
          var data = responseJson.user;
          data.loggedIn = true;
           this.setState({ procesing: false });
           this.navigation.navigate("LoginScreen",{data: JSON.stringify(data) })
            }
            else{
                 this.setState({ procesing: false, error: "Wrong Username and/or Password! Please try again" });
            }

LoginScreen 

this.state={
     data : this.props.navigation.state.params.data
}

Если используется AsyncStorge 

HttpRequest.post('api/login', body)
    .then((response) => response.json())
    .then((responseJson) => {
        if(responseJson.succcode == 201){  //successful login
          var data = responseJson.user;
          data.loggedIn = true;
           AsyncStorage.setItem("USER_DATA", JSON.stringify(data));
           this.setState({ procesing: false });
            else{
                 this.setState({ procesing: false, error: "Wrong Username and/or Password! Please try again" });
            }

LoginScreen 

  async componentDidMount() {
    let data = await AsyncStorage.getItem("USER_DATA")

   }
...