Currently, I am in the process of setting up a new Vue JS project for a blog with Firebase integration. The main objective is to allow any logged-in user to create blog posts that are saved in the Firebase real-time database at
https://xxx.firebaseio.com/blogs.jsonThe challenge I am facing is related to traditional Firebase rules where blog posts created by multiple users end up under their respective user IDs. This results in difficulty when using v-for to iterate over the blog posts as they are segregated under different user objects.
Shown below are my current Firebase rules:
{
"rules": {
"blogs": {
".read": true,
".write": false,
"$uid": {
".read": "$uid === auth.uid",
".write": "$uid === auth.uid"
}
}
}
}
I would like to have all blog posts created under one common location - blogs, rather than individual user IDs like $uid. How can this be achieved?
My current rule configuration outputs data structure as shown below:
{
"PvWsi3t9mFZza5gXP8qNQaCktDN2": {
"-LrZ87XS02DanBTybhij": {
"body": "<p><strong>test</strong></p>",
"creation": "",
"slug": "test",
"title": "My very first blog post"
},
"-LrZ8KjsJyGT1YFsIJ3G": {
"body": "<p><strong>jjj</strong></p>",
"creation": "2019-10-19",
"slug": "test-2",
"title": "Second post"
}
},
"yLLOq9jC5odefHBENkO3r2ztNzZ2": {
"-LrZ8ZRhLVEylBFaGcnq": {
"body": "<p>content here</p>",
"creation": "2019-10-04",
"slug": "test-two",
"title": "My very first blog post - ryan"
}
}
}
UPDATE
Below is the Firebase reference used to add a blog post:
firebase.database().ref('blogs/' + this.$store.state.user.uid).push(this.post).then(() => {
console.log('success')
}).catch((err) => {
console.log('error', err)
})