在 Vue 中使用 $http.get (Vue-Resource) 获取和发送 Firebase 实时数据库身份验证令牌

Question

我认为我从根本上误解了它的工作原理，我让自己陷入了循环。我花了两天时间试图解决这个问题，但我认为我被困住了，需要一些帮助才能回到正确的轨道上。

我有一个具有以下规则的 FB 实时数据库：

{
  "rules": {
      // any logged-in user access your data
      ".read": "auth != null",
      ".write": "auth != null"
    
   }
}

我可以注册用户并让他们登录。但我似乎无法弄清楚如何获取令牌然后将其与我的 $http.get 请求一起发送。目前我正在检查 auth() 更改，但我有点困惑，哪个是我应该与请求一起发送的令牌。我发现的一些事情说我应该使用 refreshToken：

firebase.auth().onAuthStateChanged(user => {
    store.dispatch("updateUserStore", {'token': user.refreshToken, 'uid': user.uid});
});

然后将令牌和 UID 存储在我的 Vuex 商店中 - 但是当我发送令牌时，我得到了以下响应：

this.$http.get('users/'+uid+'.json?auth='+token)
    .then(response => {
        return response.json();
    })
    .then(data => {
        // do something
    });

回复：

{error: "Could not parse auth token."}

我已经搜索了错误并尝试尽可能多地寻求帮助，但似乎没有任何帮助。我知道我可以改用 Axios，但我想了解为什么这不起作用而不是避免这个问题，因为显然这里发生了一些我不明白的事情。

提前谢谢你！

Answer 1

如 REST API doc 中所述，您需要“按照 Retrieve ID tokens on clients 中的步骤操作。”

因此，您应该执行以下操作（未经测试）：

firebase.auth().onAuthStateChanged(user => {
    user.getIdToken(/* forceRefresh */ true)
      .then(idToken => {
         store.dispatch("updateUserStore", {'token': idToken, 'uid': user.uid});
      }).catch(function(error) {
         // Handle error
      });
});

---

但是，请注意，ID 令牌会在短时间内（一小时）后过期，因此当用户处于登录状态时，将它们存储在 Vuex 存储中可能不是一个好主意更改（即通过onAuthStateChanged）。事实上，令牌可能会过期而不会更改用户的登录状态。