msal-react登录成功回调事件配置：MsalAuthenticationTemplate重定向登录后如何执行自定义函数

可用回调及实现方式 #

你可以通过以下两种成熟的方式实现需求： #

方式1：直接使用MsalAuthenticationTemplate自带的onSuccess回调 #

这是最简单的接入方式，组件原生支持onSuccess属性，不管配置的是Redirect还是Popup交互类型，登录认证成功后都会自动触发该回调，回调参数为认证成功的完整响应对象。
示例代码：

import { MsalAuthenticationTemplate, InteractionType } from "@azure/msal-react";

const ProtectedPage = () => {
  // 自定义登录成功后执行的逻辑
  const afterLoginSuccess = (authResponse) => {
    console.log("登录成功，当前用户：", authResponse.account.username);
    // 此处可添加你的业务逻辑：比如存储用户信息、拉取初始化数据、跳转指定页面等
  };

  // 可选：登录失败的异常处理回调
  const handleLoginError = (error) => {
    console.error("登录异常：", error);
  };

  return (
    <MsalAuthenticationTemplate
      interactionType={InteractionType.Redirect}
      onSuccess={afterLoginSuccess}
      onError={handleLoginError}
    >
      {/* 登录后才能访问的页面内容 */}
      <div>受保护的页面内容</div>
    </MsalAuthenticationTemplate>
  );
};

方式2：全局监听重定向登录完成事件 #

如果你需要在应用全局层面监听登录成功事件，不需要和单个MsalAuthenticationTemplate绑定，可以调用msal实例的handleRedirectPromise方法实现，该方法会在页面从登录页重定向回应用时自动解析登录结果。
示例代码：

import { useMsal } from "@azure/msal-react";
import { useEffect } from "react";

function App() {
  const { instance } = useMsal();

  useEffect(() => {
    // 处理重定向登录结果
    instance.handleRedirectPromise()
      .then((authResponse) => {
        // authResponse不为空说明是刚完成重定向登录
        if (authResponse) {
          console.log("全局监听到登录成功：", authResponse.account);
          // 执行全局自定义逻辑
        }
      })
      .catch((error) => {
        console.error("重定向登录出错：", error);
      });
  }, [instance]);

  return (
    {/* 你的应用根组件内容 */}
    <div>应用内容</div>
  );
}

• 如果你同时使用上述两种方式，onSuccess回调和handleRedirectPromise都会触发，注意避免重复执行业务逻辑
• Redirect模式下不要在重定向流程完成前执行会导致页面二次跳转的逻辑，避免打断登录流程
• 回调返回的响应对象包含完整的用户信息、id token、access token等字段，可直接取用

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