Firebase停止侦听onAuthStateChanged

Jam*_*ist 41 javascript firebase firebase-authentication

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

要根据文档启动监听器:

firebase.auth().onAuthStateChanged(function (user) {
    // handle it
});
Run Code Online (Sandbox Code Playgroud)

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

通过浏览器的Web控制台.

var auth = firebase.auth();
auth.removeAuthTokenListener;
Run Code Online (Sandbox Code Playgroud)

打印一个带有一个参数的函数定义.我试着做以下事情:

this.authListener = firebase.auth().onAuthStateChanged(function (user) {...});
firebase.auth().removeAuthTokenListener(this.authListener);
Run Code Online (Sandbox Code Playgroud)

但那没有做任何事情.

Fra*_*len 88

根据文档,onAuthStateChanged()函数返回

观察者的取消订阅功能.

所以你可以:

var unsubscribe = firebase.auth().onAuthStateChanged(function (user) {
    // handle it
});
Run Code Online (Sandbox Code Playgroud)

然后:

unsubscribe();
Run Code Online (Sandbox Code Playgroud)

  • 我实际上不知道它是如何工作的,但是有更多的经验可以充分利用我们的文档.;-) (5认同)
  • 对不起,如果这是一个愚蠢的问题,但为什么应用程序需要取消订阅这个观察者? (5认同)
  • 例如,当用户有意注销并且您不想再执行侦听器时 (2认同)

the*_*ter 5

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

React.useEffect(() => {
  let unsubscribe;
  const getUser = async () => {
    unsubscribe = await firebase.checkUserAuth(user => setUser(user));
  };
  getUser();
  return unsubscribe;
}, []);
Run Code Online (Sandbox Code Playgroud)

  • 由于 unsubscribe 已经是一个函数,您只需从 useEffect 返回该函数即可进行清理。即“返回取消订阅;”。比返回调用函数的函数干净得多! (2认同)