Nuxt独自

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

前置き

こちらの続きです。

ルール変更して安全な状態を作りたい❗️
ログインユーザーかつ
送信したデータ内のuid
authで取得しているuid
一致する場合のみ
読み書きしたい❗️

ということでやっていきます。


ルールの確認とコード修正

ルールの前提

条件を書かなければfalseです。
この場合はcitiesコレクション内の
全てのドキュメントの読み書きはできても
hogehogeコレクションなど
別のコレクションの読み書きは
一切できません。
安心💫☝️


前回の物をチェック

💁‍♀️ルールは現在こらち

前の記事の1番下、
修正コードが間違っていたので、
ルール変更前の成功コード②をそのまま使用

これでルール変更前の取得ができました。

しかし❗️

書き込みで権限なしのエラーが起きました💥✍️
つまり取得のルールに問題はなさそう…

しかしここには読み取りの注意はあっても
書き込みについては何も書かれていない…
データを安全にクエリする


書き込みのみtrueにしてみる

試しに変更したら、
書き込みと読み取り
両方うまく行きました。

まだ送信してないのに
resouce.data.uid
一致しないから❓
と思いましたが、
公式のサンプルコードに
書いてますからねぇ…。


ワイルドカード、再帰ワイルドカード

そしてここの下の方を見ていくと…
readwriteの指定場所が違う👀
データを安全にクエリする

{path=**}再帰ワイルドカード
バージョンによる注意も書いてあります。
任意の深い階層にも
適応されるというものです。

ワイルドカードと再帰ワイルドカードの違い

match/cities/{city}
citiesコレクションに一致する
全てのドキュメントに適応
/cities/SF
/cities/NYC
などなど

match/cities/{city}/{document=**}
citiesコレクション内の
全てのドキュメントの
全てのサブコレクションに適応。

この辺が参考になりそう…
と思って色々ためしたけども
ダメでした😯
つまり原因は他にある。
Firestore rules tips
CollectionGroupのFirebaseError: Missing or insufficient permissionsで躓いたときの対処法


request.resource.data

これを見て上手くいきました!!!
データの検証

書き込みの場合、
まだfirestoreにないデータを送るので
requestが必要ということみたいです。
なので、writeではrequestをつければ解決🙌💕


成功ルールとコード

firestoreのルールと
vuex actionsのコードはこちら

index.vueで
getDataするようにして
実際表示するul>liのコンポーネントで
gettersで中身を表示


まとめ

取得で.whereを使うだけでも
セキュリティを高めることはできましたが、
やはりルールを設定して
強固にしていくことも必要ですよね🌟

ルールは難しそうと感じましたが、
これらを理解しておけば
簡単なルールは設定できます✨

  • firestoreへの送信データの構成
  • それに合わせたワイルドカードなど
  • 用意されているrequest.authなどの変数


-Nuxt独自
-,

© 2021 aLiz Nuxt