react-google-calendar-api登录登出回调配置问题咨询

react-google-calendar-api 提供了授权状态变更的订阅机制，你可以通过以下方式拦截登录成功、登出或登录取消事件：

核心方法：onAuthChange #

这个方法允许你订阅授权状态的变化，回调函数会接收一个布尔值参数，表示当前是否已完成授权。

修改后的示例代码 #

import { useEffect } from 'react';
import { apiCalendar } from 'react-google-calendar-api';

const GoogleCalendarTestButton = (props) => {
  const onLoginClick = (e) => {
    apiCalendar.handleAuthClick();
  };

  useEffect(() => {
    // 订阅授权状态变更事件
    const unsubscribe = apiCalendar.onAuthChange((isAuthenticated) => {
      if (isAuthenticated) {
        // 登录成功后的处理逻辑
        console.log('登录成功');
        // 可调用getBasicProfile获取用户基础信息
        const userProfile = apiCalendar.getBasicProfile();
        console.log('用户信息:', userProfile);
      } else {
        // 登出或登录取消后的处理逻辑
        console.log('登出/登录取消');
      }
    });

    // 组件卸载时取消订阅，避免内存泄漏
    return () => unsubscribe();
  }, []);

  return (
    <div>
      <Button onClick={onLoginClick}>login</Button>
    </div>
  );
};

补充说明 #

• 当用户完成登录、主动登出，或是在登录弹窗中点击取消时，onAuthChange的回调都会被触发
• 你可以在任何地方调用apiCalendar.isAuthenticated()来主动检查当前的授权状态
• 如果需要区分「登录取消」和「主动登出」，可以在调用handleSignoutClick()时手动添加专属逻辑，比如：

  const onLogoutClick = () => {
    apiCalendar.handleSignoutClick();
    console.log('主动登出');
  };
  

内容的提问来源于stack exchange，提问作者Matteo Pasini