vue.js × firebaseにてログイン状態では「ログアウト」に変更させて、ログアウト状態では「ログインページ」にしたいです

Question

前提・実現したいこと

現在、vue.jsにてポートフォリオを作成しております。
（プログラミング自体勉強し初めて約３ヶ月ほどと浅いため、ご了承のほどお願いします。。）

そこで現在、vueにてfirebaseと連携させて新規登録、ログイン、ログアウトの追加するところまでできましたが、
以下のことを実装したいのですが、調べて試してみましたが上手く実装されず苦戦してます・・。

①ログイン成功後、mypageに遷移するようにしておりますが、
ヘッダー部をログイン状態では「ログアウト」に変更させて、ログアウト状態では「ログインページ」にしたいです。

※追記
header.vue

 return {
      authenticatedUser: "",
    };

上記の指定が抜けていたので、追加したらログアウトの挙動は、
ログイン状態では表示され、ログアウト状態では非表示になりました。

しかし、ログインのリンクは常に表示される形となっています。。

ログインボタンもログイン状態では非表示、ログアウト状態では表示させたいです。

②上記に続きますが、ログインしないとmypageのページが閲覧できないようにしたいです。

該当のソースコード

◆header.vue

<template>
  <header class="header">
    <router-link to="/" class="header-ttl">
      <span class="header-ttl-color">C</span>inemary</router-link
    >
    <div class="header-menu">
      <router-link to="/first" class="header-link">初めての方へ</router-link>
      <router-link to="/signup" class="header-link">新規登録</router-link>
      <router-link to="/signin" class="header-link">ログイン</router-link>
      <router-link to="/mypage" class="header-link">マイページ</router-link>
      <button class="header-link" @click="signOut" v-if="authenticatedUser">ログアウト</button>
    </div>
  </header>
</template>

<script>
import firebase from "firebase";

export default {
  name: "signOut",
  methods: {
    signOut: function() {
      firebase
        .auth()
        .signOut()
        .then(() => {
          alert("ログアウトしました。");
          this.$router.push("/signin");
        })
        .catch(() => {
          alert("ログアウトができません。");
        });
    },
  },
  mounted() {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.authenticatedUser = true;
      } else {
        this.authenticatedUser = false;
      }
    });
  },
};
</script>

<style lang="scss">
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,500&display=swap");

.header {
  position: sticky;
  top: 0;
  background-color: #000000;
  padding: 1rem 3rem;
  z-index: 999;
  display: flex;
  align-items: center;
  &-ttl {
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    text-decoration: none;
    background-color: transparent;
    border: none;
    outline: none;
    font-family: "Roboto", sans-serif;
    &-color {
      color: grey;
      font-size: 2.5rem;
    }
  }
  &-menu {
    margin-left: auto;
  }
  &-link {
    color: #fff;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    text-decoration: none;
    background-color: transparent;
    border: none;
    outline: none;
    font-size: 1rem;
    font-weight: bold;
    &:not(:first-child) {
      margin-left: 2rem;
    }
    &:hover {
      color: #bbb;
    }
  }
}

a.header-ttl:hover,
a.header-ttl:hover span {
  color: rgba(105, 104, 104, 0.623);
}
</style>

◆singin.vue

<template>
  <div class="signup">
    <h2>新規登録</h2>
    <input type="text" placeholder="Email" v-model="email" />
    <input type="password" placeholder="Password" v-model="password" />
    <button class="btn-signup" @click="signUp">登録</button>
    <p>
      既に登録済みの方は
      <router-link to="/signup">こちらへ</router-link>
    </p>
  </div>
</template>

<script>
import firebase from "firebase";

export default {
  name: "Signup",
  data() {
    return {
      email: "",
      password: ""
    };
  },
  methods: {
    signUp: function() {
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then(user => {
          alert("登録に成功しました。", user.email);
          this.$router.push("/signin");
        })
        .catch(error => {
          alert("登録情報が正しくありません。", error.message);
        });
    }
  }
};
</script>

<style lang="scss">
.signup {
  height: 90vh;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  h2 {
    font-weight: normal;
    margin-bottom: 0.5rem;
  }

  a {
    color: #eb6100;
  }
  input {
    margin: 10px 0;
    padding: 10px;
  }
  .btn-signup {
    width: 5rem;
    margin: 1rem;
    color: #fff;
    background-color: #eb6100;
    padding: 0.5rem;
    border-radius: 1rem;
    text-decoration: none;
    cursor: pointer;
    cursor: hand;
    border: none;
    outline: none;
    font-weight: bold;
  }
}
</style>

◆signup.vue

<template>
  <div class="signup">
    <h2>新規登録</h2>
    <input type="text" placeholder="Email" v-model="email" />
    <input type="password" placeholder="Password" v-model="password" />
    <button class="btn-signup" @click="signUp">登録</button>
    <p>
      既に登録済みの方は
      <router-link to="/signup">こちらへ</router-link>
    </p>
  </div>
</template>

<script>
import firebase from "firebase";

export default {
  name: "Signup",
  data() {
    return {
      email: "",
      password: ""
    };
  },
  methods: {
    signUp: function() {
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then(user => {
          alert("登録に成功しました。", user.email);
          this.$router.push("/signin");
        })
        .catch(error => {
          alert("登録情報が正しくありません。", error.message);
        });
    }
  }
};
</script>

<style lang="scss">
.signup {
  height: 90vh;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  h2 {
    font-weight: normal;
    margin-bottom: 0.5rem;
  }

  a {
    color: #eb6100;
  }
  input {
    margin: 10px 0;
    padding: 10px;
  }
  .btn-signup {
    width: 5rem;
    margin: 1rem;
    color: #fff;
    background-color: #eb6100;
    padding: 0.5rem;
    border-radius: 1rem;
    text-decoration: none;
    cursor: pointer;
    cursor: hand;
    border: none;
    outline: none;
    font-weight: bold;
  }
}
</style>

◆router.vue

import Vue from "vue";
import VueRouter from "vue-router";
import Main from "../views/main.vue";
import Signin from "../views/signin.vue";
import Signup from "../views/signup.vue";
import First from "../views/first.vue";
import Mypage from "../views/mypage.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Main",
    component: Main,
  },
  {
    path: "/signin",
    name: "Signin",
    component: Signin,
  },
  {
    path: "/signup",
    name: "Signup",
    component: Signup,
  },
  {
    path: "/first",
    name: "First",
    component: First,
  },
  {
    path: "/mypage",
    name: "Mypage",
    component: Mypage,
    meta: { requiresAuth: true },
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});


export default router;

Answer 1

VUEでの実装は教材、サンプルを探すのが難しいですね。
質問するのもむずかしいし、答える方もむずかしいです。

Vue-CLI ? Nuxt(SPA) ? Nuxt (SSR) ?

Javascript vs TypeScript

firebaseuiを使う、使わない？

@nuxt.js/firebase 使う？

いろんな実装方法があって、サンプルが混在しているからだと思います。
解説ブログがたくさんみつかりますが、要点の解説に重点を置いている物が多いです。
でも、それでは私のような初心者にはファイルの置き場所とかがわからなくって悩み込んでしまいます。

ということで解説ブログよりもまずは動くサンプルを GitHUBから取ってくるのが良いと思います。

いくつか私が参考にしているものをリストします。もっと良いのがあれば教えてほしいです。

本家
https://github.com/firebase/quickstart-js

中嶋聡さん Vue-CLI+TypeScript firebaseui(EmailAuth)
https://github.com/snakajima/vue-firebase-startup-kit

davidroyerさん Nuxt.js(SPA) firebase(signInWithRedirect)
https://github.com/davidroyer/nuxt-firebase-auth
https://www.davidroyer.me/blog/nuxtjs-firebase-auth # 解説ブログ
https://nuxt-firebase-auth.firebaseapp.com/ # デモ

Watson-Seiさん Nuxt.js(SSR) firebase(signInWithPopup)
https://github.com/Watson-Sei/nuxt-js-ssr-firebase
https://zenn.dev/watson_sei/articles/f4db7312494525 # 解説ブログ

Comments

[TMTN]

参考リストをいただきありがとうございます。
拝見させて頂きましたが、それでもうまく実装できてない次第であります。。

[gambaldia]

git cloneしても動きませんか？

Answer 2

①ログイン成功後、メインページに遷移するようにしておりますが、

ヘッダー部をログイン後は「ログアウト」に変更させて、ログアウト後は「ログインページ」に戻すようにしたいです。

ログイン中かどうかtrue/falseを持たせて条件分岐で表示の切り替えをすればいいです

②上記に続きますが、ログインしないと全てのページ閲覧できないようにしたいです。

こちらも条件分岐です
ログイン中かどうかtrue/falseの情報で、falseならログインページにリダイレクトさせるまたは隠したいコンテンツを非表示にすればokです

③新規登録にて、メールアドレスとパスワード入力後、登録ボタンを押したら、ログインページに遷移するようにしたいです。

書かれているログイン処理と同様にthis.$router.push("/signin"); でいいと思います

Comments

[TMTN]

回答ありがとうございます。
③に関しましてはそちらで思ったように実装できました。現在頂いた回答をもとに①②を実装を試みようとしましたが、やりたいことは頭に浮かんでいてもどう記述したらいいか勉強不足で恥ずかしながら分からない状況です。。調べてみたのですが、それでも行き詰ってしまっております・・。

[komasan1]

一つずつ実装していきましょう

1.ログイン状態を取得する
- firebaesのAPIを使って状態を取得する
- 取得したデータを保持する↓（データの持ち方も色々あるので一例ですが）
https://jp.vuejs.org/v2/api/#data

2.1でsetしたログインの状態を使って表示の分岐を行う
- 条件分岐はv-ifでできます
https://jp.vuejs.org/v2/guide/conditional.html#v-if

[TMTN]

firebase.auth().onAuthStateChangedをどこに記述したらいいのかと切り替え方がやはりまだ分からず行き詰まっています。。