【Nuxt.js】Firebase Auth × RDB ログインアカウントの送信と取得を考える③

Contents

前置き
おさらい
修正
他の問題発生
他にやりたいこと
まとめ

前置き

久々の更新です！
Nuxt3来ましたね〜！！✨🪐
https://nuxtjs.org/announcements/nuxt3-beta/

⬇️ということで、こちらの続きです🌟

【Nuxt.js】Firebase Auth × RDB ログインアカウントの送信と取得を考える②

最近はRuby, PHP, SQLを触り始めて
Nuxt.js全く使えてませんでした💦
また少しずつ使っていきます🍀

おさらい

もう忘れられてそうですが、
RDBのルールの階層に合わせて
送信データの形を変えていこう！
といった内容です。

⬇️前回ここまではできました🙌

{
  "rules": {
         　　".read": "auth != null",
      "users": {
        "$uid": {
         　　".write": "auth.uid != null",
        }
      }
  }
}

{

"rules": {

　　".read": "auth != null",

"users": {

"$uid": {

　　".write": "auth.uid != null",

}

  async submitChat(_, payload) {
    try {
      await this.$fire.database
        .ref('users/' + payload.uid)
        .push()
        .set({
          text: payload.text,
          time: this.$fireModule.database.ServerValue.TIMESTAMP,
          uid: payload.uid,
        })
    } catch (error) {
      console.log(error)//eslint-disable-line
    }
  },

async submitChat(_, payload) {

try {

await this.$fire.database

.ref('users/' + payload.uid)

.push()

.set({

text: payload.text,

time: this.$fireModule.database.ServerValue.TIMESTAMP,

uid: payload.uid,

})

} catch (error) {

console.log(error)//eslint-disable-line

}

ただ、
取得する際にはuid別にしかできなくなるので
チャットなのに自分の呟きしか
見れないことになります💥👀
usersもしくは
usersの後ろのuid部分の階層を
変える必要があります。

  async getData({ commit }) {
    try {
      const uid = this.$fire.auth.currentUser.uid
      await this.$fire.database
        .ref()
        .child('users')
        .child(uid)
        .once('value')
        .then((data) => {
          console.log('取得のやつ' + data.val())
          commit('setData', data.val())
        })
    } catch (error) {
      console.log(error)//eslint-disable-line
    }
  },

async getData({ commit }) {

try {

const uid = this.$fire.auth.currentUser.uid

await this.$fire.database

.ref()

.child('users')

.child(uid)

.once('value')

.then((data) => {

console.log('取得のやつ' + data.val())

commit('setData', data.val())

})

} catch (error) {

console.log(error)//eslint-disable-line

}

修正

ということで修正していきます✨🧹

ルールはこのまま。

{
  "rules": {
         　　".read": "auth != null",
      "users": {
        "$uid": {
         　　".write": "auth.uid != null",
        }
      }
  }
}

{

"rules": {

　　".read": "auth != null",

"users": {

"$uid": {

　　".write": "auth.uid != null",

}

送信と取得を変更しましょう！

これで全てのユーザーのチャットが見れます❤️👀

export const actions = {
  async submitChat({ dispatch }, payload) {
    try {
      await this.$fire.database.ref('users/').push().set({
        text: payload.text,
        time: this.$fireModule.database.ServerValue.TIMESTAMP,
        uid: payload.uid,
      })
      dispatch('getData')
    } catch (error) {
      console.log(error)//eslint-disable-line
    }
  },
  async getData({ commit }) {
    try {
      // const uid = this.$fire.auth.currentUser.uid
      await this.$fire.database
        .ref()
        .child('users')
        .once('value')
        .then((data) => {
          console.log('取得のやつ' + data.val())
          commit('setData', data.val())
        })
    } catch (error) {
      console.log(error)//eslint-disable-line
    }
  },
}

export const actions = {

async submitChat({ dispatch }, payload) {

try {

await this.$fire.database.ref('users/').push().set({

text: payload.text,

time: this.$fireModule.database.ServerValue.TIMESTAMP,

uid: payload.uid,

})

dispatch('getData')

} catch (error) {

console.log(error)//eslint-disable-line

}

async getData({ commit }) {

try {

// const uid = this.$fire.auth.currentUser.uid

await this.$fire.database

.ref()

.child('users')

.once('value')

.then((data) => {

console.log('取得のやつ' + data.val())

commit('setData', data.val())

})

} catch (error) {

console.log(error)//eslint-disable-line

}

他の問題発生

すっっっごく今更なのですが、、、

アイコンのコンポーネントは
ログインユーザーのものでしか表示されません。
つまりチャットしてて他の人のメッセージ部分でも
アイコンだけが全て自分のものに💦

authのログインアカウントに紐づく画像
user.photoURLだけを表示しているためです。

  async checkLogin({ commit }) {
    try {
      const user = this.$fire.auth.currentUser
      await commit('getData', {
        uid: user.uid,
        name: user.displayName,
        email: user.email,
        photoURL: user.photoURL,
      })
    } catch (error) {
      console.log(error) //eslint-disable-line
    }
  },

async checkLogin({ commit }) {

try {

const user = this.$fire.auth.currentUser

await commit('getData', {

uid: user.uid,

name: user.displayName,

email: user.email,

photoURL: user.photoURL,

})

} catch (error) {

console.log(error) //eslint-disable-line

}

できそうなパターンを考えてみます💡
思いついたのは2つ。
・アカウント登録時のupdateProfile()メソッドでuidを紐づけておく
・チャット送信時に画像のurlも送信し、それを取得

他にやりたいこと

この辺もできたら面白いですね🍀
・画像選択で範囲指定
・ユーザー削除、それに紐づくstorageやDBも削除
・タスクのチェック、削除

まとめ

やってから始めてデータ構造やルールが分かってきたので、
機能定義等々あまり考えられていなかったです🤔

ただ次に活かせるな〜！💡
という実感はあります笑
でもNuxt.jsの案件ってなかなかないので、
趣味程度になりそうですが…笑

そういえばぼんやり
「firebaseやってるしSQL分かるっしょ」
と思っていたのですが、
そもそもfirebaseはjsonオブジェクトだった…
SQLはテーブルか…ほうほう…
となりました🤔💭笑

この辺も気が向いたら記事にするかもしれません🍀