Firebase 停止监听 onAuthStateChanged

Posted 2023-02-23

【中文标题】Firebase 停止监听 onAuthStateChanged

【英文标题】：Firebase stop listening onAuthStateChanged

【发布时间】：2016-09-19 02:35:50

【问题描述】：

从版本 ^3.0.0 开始，我很难删除身份验证状态更改侦听器。

按照文档启动监听器：

firebase.auth().onAuthStateChanged(function (user) 
    // handle it
);

但是，我在文档中找不到任何引用删除身份验证状态更改侦听器的地方。 Firebase.Auth 类有一个特殊的功能，叫做removeAuthTokenListener。不幸的是，它没有记录在案 (firebase docs reference)。

通过浏览器的 Web 控制台。

var auth = firebase.auth();
auth.removeAuthTokenListener;

打印一个带有一个参数的函数定义。我尝试执行以下操作：

this.authListener = firebase.auth().onAuthStateChanged(function (user) ...);
firebase.auth().removeAuthTokenListener(this.authListener);

但这并没有做任何事情。

【参考方案1】：

根据the documentation，onAuthStateChanged()函数返回

观察者的退订功能。

所以你可以：

var unsubscribe = firebase.auth().onAuthStateChanged(function (user) 
    // handle it
);

然后：

unsubscribe();

【讨论】：

哦，天哪...不知道我是怎么错过的。谢谢。

我实际上不知道它是如何工作的，但是我有更多的经验来充分利用我们的文档。 ;-)

对不起，这是一个愚蠢的问题，但为什么应用程序需要取消订阅该观察者？

例如，当用户有意注销而你不想再执行监听器时

【参考方案2】：

Frank van Puffelen 已经很好地回答了这个问题，但这是我获取用户数据的 React 组件的用例。这些组件在卸载组件时需要取消订阅，否则每个组件都会出现内存泄漏。

React.useEffect(() => 
  let unsubscribe;
  const getUser = async () => 
    unsubscribe = await firebase.checkUserAuth(user => setUser(user));
  ;
  getUser();
  return unsubscribe;
, []);

【讨论】：

不知道为什么以下对我不起作用。你的回答帮助了我useEffect(() => const unsubscribe = firebase.auth().onStateChanged((user) => console.log(user)) return unsubscribe() , [])

因为 unsubscribe 已经是一个函数，你只需要从 useEffect 返回它进行清理。即“返回退订；”。比返回调用函数的函数要干净得多！