使用msal.js的acquireTokenPopup时弹窗是否有关闭监听事件？

关于acquireTokenPopup弹窗关闭事件的解决方案 #

acquireTokenPopup 本身没有对外暴露独立的弹窗关闭监听事件，但你可以通过该方法返回的Promise抛出的错误类型，精准识别用户主动关闭登录弹窗的场景，执行自定义逻辑。

具体实现方式

• msal.js 针对用户手动关闭登录弹窗的行为，会抛出特定错误码的异常，你只需要在catch回调中匹配对应错误码即可：
  • msal v2/v3版本：错误实例的errorCode属性等于userCanceled（可以直接引入BrowserAuthErrorCodes枚举匹配，避免硬编码错误）
  • msal v1版本：错误实例的name属性等于UserCancelledError

示例代码

// 以msal v2/v3为例
import { PublicClientApplication, BrowserAuthErrorCodes } from "@azure/msal-browser";

const msalInstance = new PublicClientApplication({
  // 你的msal配置
  auth: {
    clientId: "你的客户端ID",
    authority: "你的权限地址",
    redirectUri: "你的重定向地址"
  }
});

const tokenRequest = {
  scopes: ["User.Read"] // 你的权限范围
};

async function handleLogin() {
  try {
    const tokenRes = await msalInstance.acquireTokenPopup(tokenRequest);
    // 登录成功、获取到token后的业务逻辑
    console.log("认证成功", tokenRes.accessToken);
  } catch (err) {
    // 匹配用户主动关闭弹窗的场景
    if (err.errorCode === BrowserAuthErrorCodes.userCanceled) {
      // 此处填写你要执行的自定义操作
      console.log("用户未完成登录，手动关闭了弹窗");
      // 例如：重置登录按钮状态、弹出提示告知用户未完成登录等
      return;
    }
    // 其他错误的处理逻辑
    console.error("认证出错：", err);
  }
}

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