如何使用MSAL2Provider发起登出 自定义按钮注销当前用户会话

Microsoft Graph Toolkit 的 MSAL2Provider 实例内置了完整的登录、登出方法，不依赖内置<Login />组件的默认UI，可直接通过全局Provider实例触发对应操作，和你现有已正常运行的登录逻辑完全兼容。

核心前提 #

你已经完成了全局Provider初始化，后续所有操作直接调用Providers.globalProvider实例的方法即可，无需重复初始化MSAL客户端。

// 你现有的初始化逻辑保持不变
Providers.globalProvider = new Msal2Provider({
  clientId: "client-id"
});

自定义登录实现 #

直接调用Provider实例的login()方法即可触发登录流程，登录行为（弹窗/跳转）和你初始化时配置的loginType规则完全一致，可直接复用你已有的登录成功/失败回调：

const handleCustomLogin = async () => {
  try {
    // 触发微软身份认证登录流程
    await Providers.globalProvider.login();
    // 登录成功后复用原有回调逻辑
    const activeAccount = Providers.globalProvider.getActiveAccount();
    mgtSSOLoggedIn(activeAccount);
  } catch (error) {
    // 登录失败复用原有异常处理
    mgtSSOFailed(error);
  }
};

自定义登出实现 #

调用Provider实例的logout()方法会自动清理本地缓存的登录凭证、终止当前用户会话，同时完成微软账号侧的登出，避免残留登录态：

const handleCustomLogout = async () => {
  try {
    // 触发全链路登出流程
    await Providers.globalProvider.logout();
    // 登出后可自定义业务逻辑，比如跳转到应用公共首页
    window.location.href = '/public';
  } catch (error) {
    console.error('登出异常:', error);
  }
};

登录状态同步（可选） #

如果需要在自定义按钮上同步展示当前登录状态，可直接订阅Provider的状态变更事件，无需自行维护登录态变量：

import { Providers, ProviderState } from '@microsoft/mgt-element';
import { useEffect, useState } from 'react';

const [isSignedIn, setIsSignedIn] = useState(
  Providers.globalProvider.state === ProviderState.SignedIn
);

useEffect(() => {
  const updateLoginState = () => {
    setIsSignedIn(Providers.globalProvider.state === ProviderState.SignedIn);
  };
  // 注册状态变更监听
  Providers.globalProvider.onStateChanged(updateLoginState);
  return () => {
    // 组件卸载时移除监听避免内存泄漏
    Providers.globalProvider.removeStateChangedHandler(updateLoginState);
  };
}, []);

根据状态渲染自定义按钮即可：

{isSignedIn ? (
  <button onClick={handleCustomLogout}>退出当前账号</button>
) : (
  <button onClick={handleCustomLogin}>使用企业账号登录</button>
)}

注意：如果完全使用自定义按钮，你可以直接移除原有代码中的<Login />组件，不会影响MGT其他组件（如日程、人员选择器等）的登录态读取能力。

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