通过firebase搭建一个评论系统, part 2

2020年11月19日 • ... • ☕️ 3 min read

这篇是上一篇的后续，总结过程中的学习过程和遇到的困难。

firestore还是firebase

官方有对比

实际使用下来，二者可以相互转换，firestore是实时数据库（realtime database）的升级版，二者都是NoSQL数据库，区别：

1、数据组织形式

实时数据库

以JSON形式组织数据，结构简单，但是对于复杂分层数据，处理比较麻烦。

以评论为例：

comments: {
  1001: {
    post_title: 'title A',
    content: 'comment A' 
  },
  1002: {
    post_title: 'title A',
    content: 'comment B'
  }
}

firestore

以集合（collection）和文档（document）来组织数据，通常，集合包含文档，文档包含数据。

 users // <-- collection
  alovelace // <-- document
    first : "Ada"
    last : "Lovelace"
    born : 1815

  aturing  // <-- document
    first : "Alan"
    last : "Turing"
    born : 1912

2、基本操作规则区别

操作规则是保护数据库的唯一防线，比如授权的用户id，或者限制的字段类型等，所以应该考虑一下规则怎么设计。

实时数据库

规则层次匹配，外层规则覆盖嵌套的内层规则，基本规则有三种，.read / .write /.validate，至于update / create / delete，可以通过组合实现：

data指代当前数据库里的数据，newData指代将传入的数据。可以配合exists()函数，判断权限：

".write": "newData.exists() && !data.exists()" // 新数据存在且当前数据不存在，即只允许create，不允许update或delete
".write": "!newData.exists() && data.exists()" // 新数据不存在且当前数据存在，即只允许delete操作，不允许create或update
".write": "newData.exists() && data.exists()" // 新数据存在且当前数据也存在，即只允许update，不允许create或delete
".write": "!newData.exists() || !data.exists()" // 新数据不存在，或当前数据不存在，即允许create或delete，不允许update

firebase

的操作由一个match和allow组成，match匹配路径，allow指明允许的操作：

match /cities/{city} {
  allow read: if <condition>;
  allow write: if <condition>;
}

这里的read规则可以细分为get和list，而write规则可以细分为create、update和delete，所以比实时数据写起来更直观一些。

监听数据库连接状态

这是我选择实时数据库而不是firestore的原因：firestore没有提供数据库连接不上的回调方法。

有这个考虑是因为国内的网络环境，连接google有困难，所以连接不上的时候，考虑直接隐藏掉评论模块。

而因为firestore是支持离线操作的，所以它通常会自动切换到离线读写。而实时数据库是有方法检查状态：

connectedRef = db.ref('.info/connected')
connectedRef.on('value', function (snap) {
  if (snap.val()) {
    console.log('connected');
  } else {
    console.log('disconnected');
  }
});

隐藏敏感信息

由于前端连接firebase使用了明文的存储，虽然官方文档说没有安全问题，但还是想要隐藏敏感信息，可以考虑从服务端把firebase对象注入模版。但是对于无后台服务的纯静态网站，用处就不大了，有心人通过代码检查还是能看到。

所以，关键步骤还是，设计好数据库读写规则。