使用Pouch和Couch DB在React Native中登录

时间:2019-06-06 09:01:24

标签: javascript react-native pouchdb

我正在使用React Native创建一个Android应用。 我不知道如何进行这种连接。 我已经创建了一个DB.js页面和一个Login.js页面(我也应该为LoggedIn创建一个页面)。

这是我的 DB.js 页面:

import PouchDB from 'pouchdb-react-native';
PouchDB.plugin(require('pouchdb-authentication'));
PouchDB.plugin(require('pouchdb-adapter-asyncstorage').default);
PouchDB.plugin(require('pouchdb-find'));


class DB {
    constructor(dbName, username, password, protocol, host, port){
      this.remoteDB = null;
      this.localDB = new PouchDB(dbName);
      this.replication(dbName, username, password, protocol, host, port);
    }

    localdb(){
        return this.localDB;
      }

      syncByOptions(options){
        return new Promise((resolve, reject) => {
          PouchDB.replicate(this.remoteDB, this.localdb(), options)
          .on('complete', () => resolve())
          .on('error', function (err) {
            reject(err)
          });
        })
      }

      syncDB(){
        this.localdb().sync(this.remoteDB, {
          live: true,
          retry: true,
          attachments:true,
        }).on('change', function (change) {
          const direction = change.direction;
            //  if(direction == 'push') {return;}
          const changes = change.change.docs; 
        })
        .on('paused', function (paused) {
            //  console.log('paused:' + paused)
        }).on('active', function (active) {
            //  console.log('active:' + active)
        }).on('error', function (error) {
            //  console.log('error:' + error)
        });
    }

  createUserDB(databaseUser, username, password, protocol, host, port){
    const db_url = protocol + '://' + host + ':' + port + '/';
    this.remoteDB = new PouchDB(db_url + databaseUser, {
      auth: {
        username: username,
        password: password
      }
    })
  }


  loginDB(username, password){
    this.remoteDB.logIn(username, password)
      .then((doc) => {
        if(doc.ok){
          this.syncDB();
        }
    })
  }

  replication(databaseUser, username, password, protocol, host, port){
    this.createUserDB(databaseUser, username, password, protocol, host, port);
    this.loginDB(username, password);
  }

}
export default DB;

这是我的 Login.js 页面

let utility = new Utility();

class LoginConsumer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: '',
            control: true,
        };
    }

   login() {

       let control = true;
       .......

        if (control){
           let formdata = new FormData();
           const identity = {
                KiFoot: {
                    username: this.state.username.toUpperCase,
                    password: this.state.password,
                }
           }
           formdata.append('Identity',JSON.stringify(identity));

            fetch(APILINK, { // In this APILINK, I have insert the link to the API to the login.
                method: 'POST',
                headers: {
                    'Content-Type': 'multipart/form-data',
                },
                body: formdata,
            })
            .then((response) => response.json())
            .then((response) => {
            if (response._id && response.UserDB) 
                UserActions.login(response)
            })
            .catch((err) => alert("err:" + err))
       }
    }


    render() {
        return (
            <View style={style.container}>
                <View style={style.page}>
            <Icon name="lock" color="#64c7c0" size={50} position= "center"/>

                <View style={style.inputContainer}>
                    <TextInput style={style.inputs}
                        placeholder="username"
                        keyboardType="default"
                        underlineColorAndroid='transparent'
                        onChangeText={value => this.setState({ username: value })} />

                </View>
                <View style={style.inputContainer}>
                    <TextInput style={style.inputs}
                        placeholder="Password"
                        secureTextEntry={true}
                        underlineColorAndroid='transparent'
                        onChangeText={value => this.setState({ Password: value })} />
                </View>
                <View style={style.footer}>
                    <TouchableOpacity
                        style={[style.button, style.buttonOK]}
                        onPress={() => this.login()}>   // I use this to connect to login but it does nothing
                        <Text style={style.buttonTesto}>Login</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={[style.button]}
                        onPress={() => Actions.Registrazione()}>
                        <Text style={style.buttonTestoReg}>Register</Text>
                    </TouchableOpacity>
                </View>
            </View>
            </View>
        );
    }
}
export default LoginConsumer;

我发表了一些评论,我认为可能是错误。 你能帮助我吗 ?谢谢

0 个答案:

没有答案
相关问题