Vue.jsとFirebaseで特定の要素を表示させる

Question

元々のレビュー

実現したい事
・ログインしていないときにリンクがregisterとloginだけ表示させてHomeとsignouは非表示にしたい
・ログイン後にもloginとregisterは非表示にしたいです。

試したこと
・firebaseを使っていると言うことで、isAuthenticatedで現在のログインユーザーを取得して、trueかfalseでv-ifで
切り替えをするということをやってみたのですが、以下の画像のようにログインしてもHome画面に切り替わるだけで、リンクは変化しません。

App.vue

<template>
  <div id="contents">
    <template v-if="isAuthenticated">
        <router-link to="/">Home</router-link> <br>
    </template>
    <template v-if="!isAuthenticated">
        <router-link to="/signOut">Signout</router-link>  <br>
        <router-link to="/register">Register</router-link> <br>
        <router-link to="/login">Login</router-link> <br>              
    </template>
    
        
      <br><br>
    <router-view></router-view>
  </div>
</template>

<script>
import firebase from "firebase";

export default {
  computed: {
    isAuthenticated() {
        return firebase.auth().onAuthStateChanged
    }
  }
}
</script>

<style scoped>
#contents {
  text-align: center;
}
</style>

Register.vue

<template>
  <div>
    <h2>Register</h2>
    <input type="email" placeholder="Email" v-model="email">
      <br><br>
    <input type="password"  placeholder="Password" v-model="password">
      <br><br>
    <button @click="register()">submit</button>
    <p>
      Do you have an account?
        <router-link to="/login">Signup</router-link>
    </p>
  </div>   
</template>

 <script>
import firebase from "firebase"

export default {
  data() {
    return {
      name: "register",
      email: "",
      password: "",
    }
 },
 methods: {
     register() {
        firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
        .then(user => {
          alert('Create account: ', user)
        })
        .catch(error => {
          alert(error.message)
        })
  }
 }
}
</script>

Login.vue

<template>
  <div>
    <h2>Login</h2>
    
    <input type="email" id="email" placeholder="Email" v-model="email">
      <br><br>
    <input type="password" id="password" placeholder="Password"  v-model="password">
      <br><br>
    <button @click="login()">Login</button>
    <p>
      Don't you have an account?
      <router-link to="/register">register</router-link>
    </p>
  </div>   
</template>

<script>
import firebase from "firebase"


export default {
  data() {
    return {
      name: "login",
      email: "",
      password: "",
    }
 },
 methods: {
     login() {
       firebase.auth().signInWithEmailAndPassword(this.email, this.password)
            .then( user => {
              // 成功時の処理
              alert("成功", user);
              this.$router.push('/')
            }).catch( (error) =>{
                // エラー時の処理 
              alert("失敗", error)
            });
        // ユーザのログイン状態が変化したら呼び出される、コールバック関数を登録
      firebase.auth().onAuthStateChanged((user) => {
        if (user) {
          console.log('状態：ログイン中');
        } else {
          console.log('状態：ログアウト');
        }
      });
  }
 }
}
</script>

router.js

import VueRouter from 'vue-router'
import Register from "../views/Register.vue"
import Home from "../views/Home.vue";
import Login from "../views/Login.vue"
import SignOut from "../views/SignOut.vue"
import firebase from "firebase"

Vue.use(VueRouter)

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    meta: { requiresAuth: true }
  },
  {
    path: "/register",
    name: "register",
    component: Register
  },
  {
    path: "/login",
    name: "login",
    component: Login
  },
  {
    path: "/signOut",
    name: "signOut",
    component: SignOut
  }
]



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

//ナビゲーションガード
router.beforeEach((to,from,next) => {
  const requiresAuth = to.matched.some(route => route.meta.requiresAuth)
  if(requiresAuth) {
    firebase.auth().onAuthStateChanged((user) => {
      if(user) {
        next();
      }else {
        next("/login")
      }
    });
  } else {
      next();
  }
}) 


export default router

Answer 1

のようにmounted以下を追加することで実装できました。

<script>
import firebase from "firebase";

export default {
  data() {
    return {
      authenticatedUser: ''
    }
  },
  mounted() {
        firebase.auth().onAuthStateChanged((user) => {
          if (user) {
              console.log('login');
              this.authenticatedUser = true;
          } else {
              console.log('logout');
              this.authenticatedUser = false;
          }
        })
  }
}
</script>