Nuxt.js と Firebase でログインユーザーの情報を表示する

前提

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

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

概要

前提でやったこと

まずは大枠 index.vue にHello.vue を表示する。

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

ログイン後しばらく経つと、Hello.vue が Goodbye.vue に変更される。

今回やること

この時点で、ログイン情報は大枠の index.vue が所有している。

今回はログイン後に表示されているコンポーネント Goodbye.vue にログイン情報を表示する。

つまり、 index.vue から Goodbye.vue にログイン情報の受け渡しをする。

ログインユーザーを受け渡す仕組みを作る index.vue

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

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

<style>
</style>

Firebase で取得したデータはuser に格納されるので、userDate に格納する。

その後 Goodbye.vue を呼び出す際に :user="userDate" としてデータを引き渡すことができる。

ログインユーザーを受け取る Goodbye.vue

<template>
  <div >
    <h1>GOOD BYE</h1>
    <span>{{ user.displayName }}</span>
  </div>
</template>

<script>
export default {
  props: ["user"],
  data() {
    return {};
  }
}
</script>

<style>
</style>

porps という名前で親コンポーネントから受け継ぐデータを定義する*1。

Firebase のユーザーデータにはDisplayName というキーでユーザー名が格納されているので、それを表示する。

Firebase のユーザーデータはこちらの記事を参考に。

*1:別記事参照