Nuxt.js と Firebase でGoogleログイン状況でコンポーネントを出し入れする

前提

Nuxt.js と Firebase Googleアカウントログインの仕組みを作成しておく。

仕組みの作り方は別記事にて。

コンポーネントの構成

• 大枠 index.vue
• コンポーネント（ログイン前） Hello.vue
• コンポーネント（ログイン後） Goodbye.vue

仕組みを言語化

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

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

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

サンプルコード

大枠 index.vue

// index.vue

<template>
<div id="app">
  <Hello v-if="!isLogin"></Hello>
  <Goodbye v-if="isLogin"></Goodbye>
</div>
</template>

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

<style>
</style>

コンポーネント Hello.vue

// Hello.vue

<template>
<div>
  <h1>HELLO</h1>
  <button @click="googleLogin">Googleアカウントでログイン</button>
</div>
</template>

<script>
import firebase from "~/plugins/firebase.js";
export default {
  data() {
    return {};
  },
  methods: {
    googleLogin: function() {
      var provider = new firebase.auth.GoogleAuthProvider();
      firebase.auth().signInWithRedirect(provider).then(function(result) {
        var token = result.credential.accessToken;
        var user = result.user;
      }).catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;
        var email = error.email;
        var credential = error.credential;
      });
    }
  }
}
</script>
<style>
</style>

コンポーネント Goodbye.vue

// Goodbye.vue

<template>
  <div >
    <h1>GOOD BYE</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>

<style>
</style>