Vue.js集成Firebase博客：如何让登录用户直接在blogs节点下创建博文？

这个问题很常见，要实现把所有用户的博文直接存在blogs根节点下，只需要调整两个核心部分：Firebase安全规则和写入数据的代码，同时要确保每篇博文关联创建者的UID——这样既满足权限控制，又能方便后续遍历所有博文。

1. 调整Firebase安全规则 #

原来的规则是把博文放在用户UID子节点下，现在我们需要让blogs节点直接存储所有博文（用Firebase的push生成唯一ID），同时通过博文中的uid字段验证权限。更新后的规则如下：

{
  "rules": {
    "blogs": {
      ".read": true, // 保持公开读，可根据你的需求调整为特定权限
      "$blogId": {
        // 写入规则：用户已登录，且提交的博文中uid等于当前用户的auth.uid
        ".write": "auth != null && newData.child('uid').val() === auth.uid",
        ".read": true // 单篇博文的读权限，和根节点保持一致即可
      }
    }
  }
}

规则说明： #

• $blogId是Firebase push方法自动生成的唯一博文ID，替代了原来的用户UID节点。
• 写入时要求用户必须登录（auth != null），且提交的博文中必须包含与当前用户UID一致的uid字段，确保用户只能创建自己的博文。
• 如果需要让用户只能修改/删除自己的博文，可以把.write规则细化为：

  ".write": "auth != null && (data.exists() ? data.child('uid').val() === auth.uid : newData.child('uid').val() === auth.uid)"
  

  这个规则会区分“创建新博文”和“修改已有博文”两种场景：创建时验证新数据的uid，修改/删除时验证原数据的uid。

2. 修改写入博文的代码 #

原来的代码是把博文推送到blogs/$uid节点下，现在我们要直接推送到blogs根节点，并且给每篇博文添加创建者的uid字段（同时可以顺便完善空的creation时间）：

// 给要提交的博文添加uid和创建时间
const postWithUid = {
  ...this.post,
  uid: this.$store.state.user.uid, // 关联当前登录用户的UID
  creation: new Date().toISOString().split('T')[0] // 生成YYYY-MM-DD格式的创建时间
}

// 直接推送到blogs根节点，Firebase会自动生成唯一的博文ID
firebase.database().ref('blogs').push(postWithUid)
  .then(() => { console.log('success') })
  .catch((err) => { console.log('error', err) })

3. 最终数据库结构 #

调整后，你的数据库结构会变成这样：

"blogs": {
  "-LrZ87XS02DanBTybhij": {
    "body": "<p><strong>test</strong></p>",
    "creation": "2024-05-20",
    "slug": "test",
    "title": "My very first blog post",
    "uid": "PvWsi3t9mFZza5gXP8qNQaCktDN2"
  },
  "-LrZ8KjsJyGT1YFsIJ3G": {
    "body": "<p><strong>jjj</strong></p>",
    "creation": "2024-05-20",
    "slug": "test-2",
    "title": "Second post",
    "uid": "PvWsi3t9mFZza5gXP8qNQaCktDN2"
  },
  "-LrZ8ZRhLVEylBFaGcnq": {
    "body": "<p>content here</p>",
    "creation": "2024-05-20",
    "slug": "test-two",
    "title": "My very first blog post - ryan",
    "uid": "yLLOq9jC5odefHBENkO3r2ztNzZ2"
  }
}

这样用v-for遍历时，就可以直接遍历blogs下的所有节点，不用处理嵌套的用户ID层级了，逻辑会简单很多！

内容的提问来源于stack exchange，提问作者Ryan H