2017-04-23

ReactNative開發入門教學(4)-利用AsyncStorage保存登入資料

很多軟體都會有登入一次之後，接下來進入軟體都不需要再打帳號密碼的功能。

這個我很好奇是怎麼做的，上網爬文也大多是別人寫好的套件。也不知其所然。

後來爬到了一個ReactNative組件叫做 AsyncStorage 。是可以將資料存放在手機

的某個部分，我們再利用KEY去把它取出來。所以我決定利用這個方法來寫看看。

先來寫個簡單的表格吧!

import React, { Component } from 'react';
import {
  Text,
  TextInput,
  View,
  Button,
} from 'react-native';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      login_id: '',
      login_pw: '',
    };
  }
  _login_event() {
    alert(this.state.login_id + ' ' + this.state.login_pw);
  }
  render() {
    return(
      <View>
        <Text>帳號:</Text>
        <TextInput 
          onChangeText={(login_id) => this.setState({login_id})}
          value={this.state.login_id}
          />
        <Text>密碼:</Text>
        <TextInput 
          onChangeText={(login_pw) => this.setState({login_pw})}
          value={this.state.login_pw}
          />
        <Button title="登入" onPress={this._login_event.bind(this)}/>
      </View>
    );
  }
}

export default App;

執行之後如果跳出剛剛打的帳號密碼就表示簡單的表格製作成功啦!接著我們要把

帳號密碼存在手機的儲存空間內，所以我們要把AsyncStorage給import進來

import React, { Component } from 'react';
import {
  Text,
  TextInput,
  View,
  AsyncStorage,
  Button,
} from 'react-native';

然後來對登入事件作處裡

_login_event() {
  AsyncStorage.multiSet([
    ['token', 'abcdefghijklmn'],
    ['login_id', this.state.login_id],
    ['login_pw', this.state.login_pw],
  ]);
  alert('登入成功');
}

那個token是我拿來當作key使用的，這樣才能夠找到我相對應的資料用的!

接著我們加上一個檢查是否有輸入過帳號密碼的代碼

_login_event() {
  AsyncStorage.multiGet(['token', 'login_id', 'login_pw']).then((data)=>{
    token = data[0][1] || null;
    if (token == 'abcdefghijklmn') {
      alert('已登入! 帳號是' + data[1][1]);
    } else {
      AsyncStorage.multiSet([
        ['token', 'abcdefghijklmn'],
        ['login_id', this.state.login_id],
        ['login_pw', this.state.login_pw],
      ]);
      alert('登入成功');
    }
  });
}

最後我們加上一個登出事件

_logout_event() {
  AsyncStorage.multiRemove(['token', 'login_id', 'login_pw']);
  this.setState({
    login_id: '',
    login_pw: '',
  });
  alert('登出了!');
}

這樣就完成一個簡單的登入資訊保存的功能了，不過把使用者的資訊完整地保存在

手機上面我覺得是一件危險的事情。所以我覺得只要保存某個關鍵資料。每次開啟

軟體的時候都進行驗證比較好。下面是完整的代碼

import React, { Component } from 'react';
import {
  Text,
  TextInput,
  View,
  AsyncStorage,
  Button,
} from 'react-native';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      login_id: '',
      login_pw: '',
    };
  }
  _login_event() {
    AsyncStorage.multiGet(['token', 'login_id', 'login_pw']).then((data)=>{
      token = data[0][1] || null;
      if (token == 'abcdefghijklmn') {
        alert('已登入! 帳號是' + data[1][1]);
      } else {
        AsyncStorage.multiSet([
          ['token', 'abcdefghijklmn'],
          ['login_id', this.state.login_id],
          ['login_pw', this.state.login_pw],
        ]);
        alert('登入成功');
      }
    });
  }
  _logout_event() {
    AsyncStorage.multiRemove(['token', 'login_id', 'login_pw']);
    this.setState({
      login_id: '',
      login_pw: '',
    });
    alert('登出了!');
  }
  render() {
    return(
      <View>
        <Text>帳號:</Text>
        <TextInput 
          onChangeText={(login_id) => this.setState({login_id})}
          value={this.state.login_id}
          />
        <Text>密碼:</Text>
        <TextInput 
          onChangeText={(login_pw) => this.setState({login_pw})}
          value={this.state.login_pw}
          />
        <Button title="登入" onPress={this._login_event.bind(this)}/>
        <Button title="登出" onPress={this._logout_event.bind(this)}/>
      </View>
    );
  }
}

export default App;

ReactNative