VueJS + VueFire - 通过身份验证将数据添加到 Firebase 实时数据库

Question

我将 VueJS 与 VueFire 一起使用，我需要将数据保存到 Firebase 实时数据库 用户授权。

错误信息：

util.js?54b5:189 FIREBASE WARNING: set at /notes/-L5J8Hk8wKHOxH-TQEhb failed: permission_denied exports.warn @ util.js?54b5:189 Repo.js?6ebd:510

Uncaught (in promise) Error: PERMISSION_DENIED: Permission denied

at eval (Repo.js?6ebd:510)
at Object.exports.exceptionGuard (util.js?54b5:556)
at Repo.callOnCompleteCallback (Repo.js?6ebd:501)
at eval (Repo.js?6ebd:278)
at eval (PersistentConnection.js?eae0:411)
at PersistentConnection.onDataMessage_ (PersistentConnection.js?eae0:444)
at Connection.onDataMessage_ (Connection.js?33e2:262)
at Connection.onPrimaryMessageReceived_ (Connection.js?33e2:256)
at WebSocketConnection.eval [as onMessage] (Connection.js?33e2:157)
at WebSocketConnection.appendFrame_ (WebSocketConnection.js?4701:197)

我的 Firebase 授权规则：

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

VueJS 代码addnote.vue:

<script>
 import Firebase from 'firebase'
  let config = {
    apiKey: '[...]',
    authDomain: '[...].firebaseapp.com',
    databaseURL: 'https://[...].firebaseio.com',
    projectId: '[...]',
    storageBucket: '',
    messagingSenderId: '[...]'
}
  let app = Firebase.initializeApp(config)
  let db = app.database()
  let notesRef = db.ref('notes')

export default {
    name: 'app',
    beforeCreate: function () {
      Firebase.auth().onAuthStateChanged((user) => {
        if (user) {
          this.user = user
          this.$bindAsArray('notes', db.ref(`notes/${user.uid}`))
        }
      })
    },
    firebase: {
      notes: notesRef
    },
    data () {
      return {
        user: null,
        newNote: {
          title: '',
          time: '',
          note: ''
        }
      }
    },
    methods: {
      addNote: function () {
        notesRef.push(this.newNote)
        this.newNote.title = ''
        this.newNote.time = ''
        this.newNote.note = ''
      },
      signInWithGoogle: function () {
        const provider = new Firebase.auth.GoogleAuthProvider()
        Firebase.auth().signInWithRedirect(provider).then((result) => {
          this.user = result.user
        }).catch(error => console.log(error))
      }
    }
}
</script>

Answer 1

您正在收听 /notes 并写入 ``/notes/-L5J8Hk8wKHOxH-TQEhb, while your rules only give you permission on/users/$uid`。由于您没有后者的权限，因此写入失败。

您至少要更改：

beforeCreate: function () {
  Firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      this.user = user
      this.$bindAsArray('notes', db.ref(`/users/${user.uid}`))
    }
  })
},

并且：

addNote: function () {
    db.ref('users').child(this.user.uid).push(this.newNote)
    this.newNote.title = ''
    this.newNote.time = ''
    this.newNote.note = ''
},

VueJS + VueFire - 通过身份验证将数据添加到 Firebase 实时数据库

VueJS + VueFire - Add data to Firebase Real Time Database with authentication

javascript

firebase

firebase-authentication

firebase-realtime-database

vuefire