Nuxt.js と Firebase で作成したログインシステムにローディング画面を付け足してみる

前提

Nuxt.js と Firebase でログインシステムを構築しておく。

上記ログインシステムの構築方法は別記事にて記載している。

上記システムの仕組み

まずは大枠 index.vue でコンポーネント（ログイン前） Hello.vue を表示する。

Hello.vue に組み込まれたGoogleログイン ボタンをクリック後、Googleログイン認証画面に飛び、ログイン完了できる。

その後しばらく経つと、index.vue でコンポーネントが Goodbye.vue に変更される。

ローディングページが欲しい

作成したシステムだとログイン判断中に、Hello.vue が表示されてしまう。

つまりユーザーがログイン後、しばらくの間もログイン前の画面が表示されている。

それを何とか解消するためにローディングページを導入する。

コード

<template>
<div id="app">
  <div v-if="!loading">ログイン中...</div>
  <Hello v-if="!isLogin && loading"></Hello>
  <Goodbye v-if="isLogin && loading" :user="userDate"></Goodbye>
</div>
</template>

<script>
import firebase from "~/plugins/firebase.js";
export default {
  data() {
    return {
      loading: false,
      isLogin: false,
      userDate: null
    };
  },
  created() {
    firebase.auth().onAuthStateChanged(user => {
    if (user) {
        this.isLogin = true;
        this.userDate = user;
      } else {
        this.isLogin =false;
        this.userDate = null;
      }
      this.loading=true;
    });
  },
};
</script>

<style>
</style>

考え方

<div v-if="!loading">ログイン中...</div>

まずはローディング中に表示させる要素を作成し、v-if を使用し条件で出し入れを可能にする。

続いて条件を指定する。

初期値はfalse でfirebase.auth().onAuthStateChanged の処理を実行中のみtrue（表示） に変更する。

  <Hello v-if="!isLogin && loading"></Hello>
  <Goodbye v-if="isLogin && loading" :user="userDate"></Goodbye>

同時に、上記２つのコンポ―ネントにはloading を付与することで、常にtrue（表示） する。