ログイン時のみDBの参照、書き込みができるアプリの作成をやっていきます

firebaseの設定

firebaseのコンソールにアクセス => Databaseをクリック => ルールをクリック

DBのルール設定が表示されるので、以下のように修正する(.readと.writeの行)

これでログインしている場合のみ、readとwriteが使えるようになる

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

コード修正

ログイン、ログアウト処理

ログインは前回と同様、providerを作成してsignInWithPopupを実行する

ログアウトはsignOutで行う

// ログイン
let provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider).then(function(result) {
  ...
})

// ログアウト
firebase.auth().signOut()

ログインしている時、currentUserにユーザ情報のオブジェクトが保持される

これはsignInWithPopupで返されるオブジェクトと同じなので、displayNameなどの値を取り出せる

ログアウト時はnullとなるので、ログインしているかどうかの判定にも使える

firebase.auth().currentUser

DB連携

firebase.database()でDBオブジェクトを取得する。refメソッドで参照先を指定する

let db = firebase.database()
let ref = db.ref("board")

並び替え、絞り込み

orderByKey()はキーの昇順でのソート。limitToLast()は最後のデータから引数(数値)分のデータに絞り込んで取得する

ref.orderByKey().limitToLast(10)

他にも以下のようなソート、絞り込み方法が存在する

ソート

orderByValue ... 値による並び替え
orderByChild ... 引数に指定した子ノードの値によって並び替え

絞り込み

equalTo ... 引数の値と等しいもの
limitToFirst ... 先頭のデータから引数で指定した件数分
startAt ... 先頭の値を引数で指定した値とする
endAt ... 最後の値を引数で指定した値とする

イベント監視

on()メソッドでvalueイベントを監視する

value イベントを使用して、データの追加などが行われる度に、その時点での参照先のデータを読み取ることができる

以下の例だとsnapshot.val()で参照先の値を取り出せる

ref.orderByKey().limitToLast(10).on("value", function(snapshot) {
  snapshot.val() // 参照先の値
})

firebase.google.com

データ追加

dataに保存するデータをオブジェクトで用意しておき、参照先(ref(`board/${id}`))に対してsetメソッドで保存できる

(ここでは現在時刻をミリ秒に変換したものをidとしている。今回は勉強目的なので問題無さそうだが、完全に重複しないとは言い切れないので実際のシステム開発時は別の方法を検討するのが良いかも)

let data = {
  foo: this.foo,
  bar: this.bar,
  baz: this.baz,
}
let id = (new Date).getTime()
firebase.database().ref(`board/${id}`).set(data)

これにて、「Vue.js & Nuxt.js超入門」の写経はひとまず終了

次は、付録が残っているのでそれをやるか、また別のことをやるかどうしようか、、といったところです

どあらんど

田無rb#10 ~Nuxt.js firebase連携⑥~