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

Posted 2023-02-22

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

【英文标题】：Getting and Sending Firebase Realtime Database Auth Token with $http.get (Vue-Resource) in Vue

【发布时间】：2020-11-11 18:03:41

【问题描述】：

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

我有一个具有以下规则的 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，但我想了解为什么这不起作用而不是避免这个问题，因为显然这里发生了一些我不明白的事情。

提前谢谢你！

【问题讨论】：

"我知道我可以使用 Axios" 是否可以与 Axios 一起使用？应该没什么区别。

【参考方案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）。事实上，令牌可能会过期而不会更改用户的登录状态。

【讨论】：

非常感谢 - 我一直坚持这个问题，我认为你的回答让我意识到我做错了什么。我也理解你的建议。如果您每次都申请一个新的代币，最佳实践是什么？这似乎很浪费，所以我认为有更好的方法我只是不知道。