【Vue × Firestore】ログイン後、認証済みのマイページに遷移させる。

ログイン後、認証済みのマイページに遷移させる。

signin.vue

<template>
  <div>
    <Header />
    <div class="signin flex">
      <div class="signin-inner flex">
        <h2>ログイン</h2>
        <input type="text" placeholder="Email" v-model="email" />
        <input type="password" placeholder="Password" v-model="password" />
        <button class="btn" @click.prevent="signIn">ログイン</button>
        <p>
          アカウントをお持ちでない方は
          <router-link to="/signup">こちらへ</router-link>
        </p>
      </div>
    </div>
  </div>
</template>

signin.vue

<script>
import firebase from "firebase";
import Header from "@/components/header.vue";

　　~ 省略 ~

export default {
  name: "Signin",
  data() {
    return {
      email: "",
      password: "",
    };
  },
  components: {
    Header,
  },
  methods: {
    signIn() {
      firebase
        .auth()
        .signInWithEmailAndPassword(this.email, this.password)
        .then((res) => {
          //ログイン時に取得したemailとpasswordを引数であるresに渡す。
          this.$swal("ログインに成功しました。 ", {
            icon: "success",
          });
          this.uid = res.user.uid;
          //this.uidに 「res.user.uid;」を格納
          return (
            firebase
              .firestore()
              .collection("users")
              .doc(res.user.uid)
              //usersのドキュメントを参照して、上記で引数として受けたresのuid取得
              .get()
          );
        })
        .then(() => {
          this.$router.push(`/mypage/${this.uid}`);
        })
        .catch(() => {
          this.$swal("ログイン情報が間違っています。", {
            icon: "error",
          });
        });
    },
  },
};
</script>

まずfirebase.auth().signInWithEmailAndPassword(this.email, this.password)で
ログイン時に取得したemailとpasswordをresという引数に渡してます。

signin.vue

    signIn() {
      firebase
        .auth()
        .signInWithEmailAndPassword(this.email, this.password)
        .then((res) => {
          //ログイン時に取得したemailとpasswordを引数であるresに渡す。
          this.$swal("ログインに成功しました。 ", {
            icon: "success",
          });

usersというコレクションを参照して、上記で取得したresから「uid」を取得して
get()を使ってuidデータをFirestoreから取得。

signin.vue

     return (
            firebase
              .firestore()
              .collection("users")
              .doc(res.user.uid)
              //usersのドキュメントを参照して、上記で引数として受けたresのuid取得
              .get()
          );

ページを遷移させる為に一度this.uidに 「 res.user.uid;」を格納してから
${this.uid}として対象ページに遷移させています。

signup.vue

          this.uid = res.user.uid;
          //this.uidに 「res.user.uid;」を格納

         ~ 省略 ~

        .then(() => {
          this.$router.push(`/mypage/${this.uid}`);
        })