使用@azure/msal-react的loginPopup关闭弹窗时应用崩溃，try/catch无效如何解决？

一、解决关闭登录弹窗导致应用崩溃的问题 #

1. 修复Login组件的async定义错误 #

React组件不能是异步函数，你当前的Login组件定义为async () => {}会导致组件返回Promise而非React元素，这是引发异常的潜在原因之一。修改为同步组件：

// 修正后的Login组件
import { useMsal } from '@azure/msal-react'
import { loginRequest } from './config'

// 去掉async，组件必须是同步函数
const Login = () => {
  const { instance } = useMsal()
  
  // handleLogin内部可以是async函数
  const handleLogin = async () => {
    try {
      const response = await instance.loginPopup(loginRequest)
      // 后续处理登录成功逻辑
    } catch (error) {
      // 捕获并处理登录错误，包括用户取消
      if (error.errorCode === 'user_cancelled') {
        console.log('用户取消登录流程')
        return
      }
      console.error('登录失败:', error)
    }
  }

  return (
    <div>
      <button onClick={handleLogin}>Login</button>
    </div>
  )
}

2. 全局捕获MSAL的user_cancelled错误 #

即使在handleLogin中添加try/catch，MsalAuthenticationTemplate仍可能监听全局认证事件并抛出未捕获异常。通过MSAL实例的事件回调拦截该错误：

// App.js中修改MSAL实例初始化逻辑
const App = () => {
  const msalInstance = useMemo(() => {
    const instance = new PublicClientApplication(msalConfigAzureB2C)
    // 添加事件回调，拦截用户取消的错误
    instance.addEventCallback((event) => {
      if (event.error && event.error.errorCode === 'user_cancelled') {
        // 阻止错误向上冒泡引发崩溃
        return false
      }
    })
    return instance
  }, [])

  return (
    <>
      <MsalProvider instance={msalInstance}>
        <BrowserRouter>
          <MsalAuthenticationTemplate>
            <AuthenticatedComponents />
          </MsalAuthenticationTemplate>
          <UnauthenticatedTemplate>
            <UnAuthenticatedComponents />
          </UnauthenticatedTemplate>
        </BrowserRouter>
      </MsalProvider>
    </>
  )
}

3. 为MsalAuthenticationTemplate添加错误模板 #

通过errorTemplate属性自定义错误处理，避免组件崩溃：

// 在App.js的MsalAuthenticationTemplate中添加errorTemplate
<MsalAuthenticationTemplate
  errorTemplate={(error) => {
    if (error.errorCode === 'user_cancelled') {
      return <div>用户已取消登录</div>
    }
    return <div>登录出错：{error.message}</div>
  }}
>
  <AuthenticatedComponents />
</MsalAuthenticationTemplate>

二、解决登录后令牌未存储、state_not_found错误的问题 #

1. 登录成功后激活账户 #

MSAL React需要激活账户才能识别认证状态，登录成功后调用setActiveAccount：

// Login组件的handleLogin中添加
const handleLogin = async () => {
  try {
    const response = await instance.loginPopup(loginRequest)
    // 激活账户，确保MSAL识别已认证状态
    instance.setActiveAccount(response.account)
  } catch (error) {
    // 错误处理
  }
}

2. 检查MSAL配置的正确性 #

• 确保msalConfigAzureB2C中的redirectUri与当前应用的域名/路径完全匹配，且已在Azure B2C的应用注册中配置该重定向URI。
• 确认loginRequest包含必要的scope，例如：

  export const loginRequest = {
    scopes: ["openid", "profile", "offline_access"]
  }
  

3. 确保MSAL实例仅初始化一次 #

避免重复创建MSAL实例，建议直接在组件外部初始化，而非使用useMemo（如果msalConfigAzureB2C是静态配置）：

// App.js外部初始化实例
const msalInstance = new PublicClientApplication(msalConfigAzureB2C)
msalInstance.addEventCallback((event) => {
  if (event.error && event.error.errorCode === 'user_cancelled') {
    return false
  }
})

const App = () => {
  return (
    <>
      <MsalProvider instance={msalInstance}>
        {/* 其余代码 */}
      </MsalProvider>
    </>
  )
}

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