在 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."}

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

提前致谢！

Answer 1

如 REST API doc, you need to "follow the steps in 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
      });
});

HOWEVER，请注意 ID 令牌会在短时间（一小时）后过期，因此当用户的登录状态发生变化（即通过 onAuthStateChanged）。事实上，令牌可能会在用户登录状态没有任何变化的情况下过期。

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

Getting and Sending Firebase Realtime Database Auth Token with $http.get (Vue-Resource) in Vue

firebase

vue.js

vue-resource