vueとfirebaseとローディング画面

事の発端

できたこと

vueとfirebaseをつなげ、googleアカウントからSignInするところまではできた

問題

SignInする前のページとした後のページで見せる画面が違うため、リダイレクトさせているけど
SignInする前のページがちょっとだけ見えちゃってローディング画面を置きたかった。

解決策

説明

• 親コンポーネントのdataにローディング画面のフラグを置く
• beforeCreateでfirebase.auth().onAuthStateChangedを走らせる間、dataの値を使い、処理が終わったらフラグを変える

ファイルの構成

src/
├ App.vue
└ components/
  ┗ Editor.vue
  ┗ Home.vue

ソース

<template>
  <div id="app">
    <div v-if="!loading">Loading...</div>
    <Home v-if='!isLogin && loading'></Home>
    <Editor v-if='isLogin && loading' :user='userData'></Editor>
  </div>
</template>

<script>
import Editor from './components/Editor.vue'
import Home from './components/Home.vue'
import firebase from 'firebase';

export default {
  name: 'app',
  beforeCreate:function(){
    console.log('beforecreate');
    console.log(this.loading);
    firebase.auth().onAuthStateChanged(user =>{
      if(user){
        this.isLogin=true;
        this.userData=user;
      } else {
        this.isLogin=false;
        this.userData=null;
      }
      this.loading=true;
      console.log('end onAuth');
      console.log(this.loading);
    })
  },
  created:function(){
    console.log('create');
    console.log(this.loading);
  },
  data(){
    return{
      isLogin:false,
      userData:null,
      loading:false,
    }
  },
  mounted:function(){
    console.log('mounted');
    console.log(this.loading);
  },
  components: {
    'Home':Home,
    'Editor':Editor,
  }
}
</script>

/*以下、styleは略*/

結果

ローディング画面

参考サイト

Vue + Firebase + Auth Demo