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

November 19, 2020 ... ☕️ 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对象注入模版。但是对于无后台服务的纯静态网站,用处就不大了,有心人通过代码检查还是能看到。

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

#react

SideEffect is a blog for front-end web development.
Code by Axiu / rss