[nuxt.js その８] firestoreの利用

データベース設計

firestoreのデータ構成は以下

　/
　└ コレクション/
　　　└ ドキュメント/
　　　　　　└ フィールド

今回はユーザごとにユーザ名を保持したいので以下のようにします。

　/
　└ users /
　　　└ USERID /
　　　　　　└ name: "あいうえお"

また、データにアクセスできるユーザのルールについても設定しておきます。
match /databases/{database}/documentsの記述がありますが、これは/を指します。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Make sure the uid of the requesting user matches name of the user
    // document. The wildcard expression {userId} makes the userId variable
    // available in rules.
　　// ここにルールを書く
  }
}

今回はドキュメント名が自分のユーザーIDと一致するユーザーしかアクセスできないようにします。
（createについては別）

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Make sure the uid of the requesting user matches name of the user
    // document. The wildcard expression {userId} makes the userId variable
    // available in rules.
    match /users/{userId} {
      allow read, update, delete: if request.auth.uid == userId;
      allow create: if request.auth.uid != null;
    }
  }
}

ユーザページの作成

上記で用意したfirestoreにユーザ名を保存します。
https://firebase.google.com/docs/reference/js/firebase.firestore.Firestore?hl=ja

~/pages/index.vue

<template>
<v-app>
  <v-btn @click="logout">ログアウト</v-btn>
  <v-btn @click="getStatus">ユーザ情報の表示</v-btn>
  <div v-if="isVisible">
    <v-card-text>
      <v-subheader class="pa-0">ユーザー名</v-subheader>
      <v-text-field
        v-model="update.name"
        :label="user_infos.name"
      ></v-text-field>
    </v-card-text>
    <v-btn @click="updateStatus">ユーザ情報を更新する</v-btn>
  </div>
</v-app>
</template>

<script>
import firebase from '~/plugins/firebase.js'
export default {
  middleware: 'must-be-authenticated',
  data () {
    return {
      user_infos: '',
      isVisible: false,
      isfirst: 'true',
      uid: '',
      update: {
        name: ''
      }
    }
  },
  methods: {
    logout () {
      firebase.auth().signOut()
        .then(data => {
          this.$store.dispatch('auth/setLogOut')
          this.$store.dispatch('auth/setEmail', '')
          this.$store.dispatch('auth/setFireID', '')
          this.$store.dispatch('snackbar/setMessage', 'ログアウトしました')
          this.$store.dispatch('snackbar/snackOn')
          this.$router.push({path: '/'})
        })
    },
    getStatus () {
      if (this.isfirst) {
        firebase.firestore().collection('users').doc(this.$store.state.auth.fireid)
          .get()
          .then(doc => {
            if (doc.exists) {
                this.user_infos = doc.data()
                this.isVisible = !this.isVisible
                this.isfirst = false
            } else {
                // doc.data() will be undefined in this case
                this.$store.dispatch('snackbar/setMessage', 'エラーが発生しました')
                this.$store.dispatch('snackbar/snackOn')
            }
        })
      } else {
        this.isVisible = !this.isVisible
      }
    },
    updateStatus () {
      if (this.user_infos.name === this.update.name || this.update.name === null) {
        return
      }
      firebase.firestore().collection('users').doc(this.$store.state.auth.fireid)
        .update({
          name: this.update.name 
        })
    }
  }
}
</script>

以上！