【ionic2】ログイン機能を実装する

はじめに

今回やりたかったのは、まぁ普通のログイン機能をもつアプリ。実装したい要件としては以下
・未ログインの場合は、ログイン画面を表示。
・ログイン済の場合は、他の画面が見れる。

実装方法としては以下のような形で行ってみた。
・ログイン済みかどうかはローカルストレージに保存して判定する。
・app.component.ts の platform.ready()でローカルストレージをチェック。
・ログイン済みの場合は他の画面を表示
・未ログインの場合はログイン画面を表示。ログインに成功したらローカルストレージに書き込んでindex.htmlをリロードする。リロードすることでplatform.ready()が再度呼ばれるので次はログインと判定されるはず。

実装

src/app/app.component.ts

・・・
import { Storage } from '@ionic/storage';
・・・
export class MyApp {

  rootPage:any;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, storage: Storage) {
    platform.ready().then(() => {

      statusBar.styleDefault();
      splashScreen.hide();

      storage.get('auth').then((val) => {
        if (val == null) {
          // 未ログインの場合はログイン画面を表示
          this.rootPage = 'signin';
        } else {
          // ログイン済みの場合はその他の画面を表示
          this.rootPage = 'home';
	}
      });
    });
  }
}

src/pages/signin/signin.ts

import { Storage } from '@ionic/storage';

・・・

export class SigninPage {

  ・・・

  // ログイン
  signin() {
    this.ApiService.get('/signin', {})
      .then(data => {
        // ログインに成功したらログイン情報をローカルストレージに保存して、リロード
        this.storage.set('auth', { token:data.token });                                                                                                                                                            
        location.reload();                                                                                                                                                                                         
      })
      .catch(messages => {
	alert(messages);
      });
  }

  /* ログアウトも手抜きここで書いちゃう */
  signout() {
    // ローカルストレージを削除してリロード
    this.storage.remove('auth');
    location.reload();
  }
}

なんか正当な方法じゃなさそうだけど、自分がやってるアプリだとこんなので十分事足りそう。以上です。