javascript - 如何删除 Google OAuth2 gapi 事件监听器？

Question

我真的很难理解如何删除 google gapi 事件监听器。粗体下方是有问题的完整功能。

window.gapi.auth2.getAuthInstance().isSignedIn.listen(onAuthChange);

我想在 useEffect Hook 中使用我的清理函数来删除事件监听器，但执行此操作的实际代码...我假设与简单的 javascript“removeEventListener”不同？我在谷歌文档中找不到任何东西。我的问题是我需要知道其他页面上的身份验证状态何时更改，并且需要其他函数在事件触发时运行(身份验证状态更改)——但由于原始文件一直在运行，我最终得到了一堆不必要的函数调用.当您登录和注销时，情况会变得更糟……随着事件监听器的累积。

import React, { useEffect, useContext, useState } from "react";
import history from "../history";
import { GeneralContext } from "../contexts/General";

const GoogleAuth = () => {
  const { state, setState } = useContext(GeneralContext);

  const onAuthChange = () => {
    const auth = window.gapi.auth2.getAuthInstance();
    setState({ authStatus: auth.isSignedIn.get() });

    if (auth.isSignedIn.get() === true) {
      const token = auth.currentUser.fe.qc.access_token;
      setState({ accessToken: token });
    }
  };

  // Check auth status on mount
  useEffect(() => {
    window.gapi.load("client:auth2", () => {
      window.gapi.client
        .init({
          clientId:
            "320808104510-qjdjiooodidc8jm1i000oteqc7h63029.apps.googleusercontent.com",
          scope: "https://www.googleapis.com/auth/books",
        })
        .then(() => {
          const auth = window.gapi.auth2.getAuthInstance();
          //setState({ authStatus: auth.isSignedIn.get() });
          console.log("Event listender mounted on Sign-in Page");
          auth.isSignedIn.listen(onAuthChange);
        });
    });
  }, []);

  const onClick = () => {
    console.log(state.authStatus);
    const auth = window.gapi.auth2.getAuthInstance();
    auth.signIn();
    //setState({ authStatus: auth.isSignedIn.get() });
  };

  // Proceed to next page if user Signs into Google
  const proceed = () => {
    //Verify sign in
    if (state.authStatus === true) {
      //console.log("I am signed in");
      history.push("/home");
    }
  };

  // Runs after state updates
  useEffect(() => {
    proceed();

    return () => {
      // console.log("GoogleAuth Unmounted");
      // const auth = window.gapi.auth2.getAuthInstance();
      // window.removeEventListener(onAuthChange(), auth.isSignedIn.listen()); <--This is my attempt to remove the event listender, but it didn't work! 
    };
  }, [state.authStatus]);

  return (
    <React.Fragment>
      <div to="/" className="login btn" onClick={onClick}>
        Sign in with Google
        <svg className="google__svg">
          <use xlinkHref="img/sprite.svg#icon-google"></use>
        </svg>
      </div>
    </React.Fragment>
  );
};

export default GoogleAuth;

Answer 1

我遇到了同样的问题，找不到任何文档来指导我朝着正确的方向前进。虽然我找到的文档和 typescript 类型都表明 auth.isSignedIn.listen() 没有返回值，但在浏览器控制台中检查返回值会发现情况并非如此。

它返回一个对象，该对象的原型(prototype)上有一个 remove() 方法。添加监听器时保存返回的对象，并在清理时调用其 remove 方法。

  useEffect(
      () => {
        let listenerContext;

        window.gapi.load('client:auth2', () => {
          window.gapi.client.init({
            clientId,
            discoveryDocs: [...DISCOVERY_DOCS],
            scope: SCOPES,
          }).then(() => {
            const auth = window.gapi.auth2.getAuthInstance();
            listenerContext = auth.isSignedIn.listen(onSigninChange);
            // ... etc
          });
        });

        return () => {
          listenerContext?.remove();
        };
      },
      [],
  );

因为我找不到任何文档，所以我不能说这是一个稳定的长期功能。至少，我希望它能帮助你在你的项目中畅通无阻。