Nuxt独自

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

前置き

Udemyのコースで
自分自身も見直して勉強になったので
Firebase関連の
送信・取得をまとめていきます💫
以前も何度かやっていますが、
ulliでコンポーネントを分けて…
というのがなかったので、
その辺も含めて💡

作ったのはfirebaseと連携した
チャット機能(Realtime Database)と
タスク管理機能(Cloud Firestore)
2画面一緒に見れて
いちいち切り替えなくて良い
便利なアプリです🍀

今回はタスク管理機能をやります。
vuexを使用しています。


ログインユーザーで取得

gettersは全て
actionsでFirebaseから
getメソッドで取得し、
mutationsで上書きです。

書き込みは簡単そうだな〜と思い
読み取りからチャレンジしてみました。
ただルールをログインユーザーのみにし
書き込みに手をつけたら
mutations以外で上書きするな!
と後から例のエラーが出たので
また調整します🌱

順序的に絶対書き込みからやるべきだった

タスクの取得

送信しているデータはこんな感じで
ルールは誰でも読み書きできる状態。

NGコード例①

まず始めに
v-showでアカウントuser.uid
todosで送信しているuid
一致するものだけを表示…
したかったのですが
これはNGでした❌
・そもそもv-forv-ifの併用がNG💥
 v-showは明記されていませんが
 実際エラーだったのでNGのようです。
 v-for-と一緒に-v-if-を使うのを避ける-必須
・他の人のデータも見れてしまうので
 セキュリティ的にもNG

todosは配列にオブジェクトが入っています。
[{ task: '', uid: 'アカウント別のuid',}, {}, {}]
そのオブジェクト全ての中の
uidとする必要があります。

computedtodosprops
ListItemTaskに渡しているので
ここを直接いじることはできないな…
と思って関数を用意して
v-showを思いつきましたが、
上記の理由でNG。

普通にv-ifしてもeslintエラーなので
//eslint-disable-lineしましたが…
vue/no-use-v-if-with-v-for
やっぱりエラーが解消されず
公式見たらNGと。

成功コード例①

そしてこちらを参考にしました!
v-forとv-ifの併用はダメらしいんで対策した件

そもそもcomputedfilterかければOK!
ということで書き換え。
propstype: Object変える必要あるかもと
気になっていましたが大丈夫でした🌟

ただ後述するコードの
.whereを使用した方が◎
filterもいらないし、
セキュリティ的にも安心だからです⭕️

成功コード②

こちらがベストコード✨


ルールを変更してみる

上記のコードで成功したものの、
「そもそもfirebaseのルールを
 書き換えた方が早いのでは?」
と思いチェック👀
ルールでユーザー情報を利用する

これはフィルターのような
データを絞る機能ではなく
実行するかしないかの
基準を設定みたいですね💡

ルールをコピペして変更し、
filterなしで全てのリストを表示に変更

ログインしてもエラー。
ルールがおかしいぞと思ってみたら
公式のコレクションの名前を
そのまま使用しているからですね。

ルールはログインしたアカウント情報
request.auth.uid
自分の送信したデータにある
uidと一致すればOK
ということで変更

request.auth != null
!=で一致しないかどうか、
ゲストだったら空なので一致するためfalse
ログインしていたら空じゃないのでtrue

&&
かつ、という意味

taskコレクションの
自動生成されたIDにある
uidと一致すればOKなので変更
{ uid }はワイルドカードで
{ hoge }とか何でも良いものです。
taskコレクション内の
どのドキュメントにも適応されます。
基本的な読み書きのルール

しかしこれでもエラー💥
こちらをチェックすると…
データを安全にクエリする

取得する際に
getメソッドを使用しているとNG❌
そして使っていました。

まずは取得のコードを修正

ところがこれでもエラー💣💥
forEachいらないのか❓
と思いきや…
いるみたいです。
クエリを実行する

書き込みはできても
例のエラーが出ます。
mutations以外でうんたらかんたら。
ということでこの続きをやっていきます。


まとめ

誰でも読み書きできるルールでも
テンプレートで
表示の切り替えはできました✨👏
ルール変更によるエラーは
解決していませんが、
セキュリティ面で
できるに越したことないので
続けてチャレンジしていきます!

-Nuxt独自
-,

© 2021 aLiz Nuxt