Azure登录跳转后页面空白，报BrowserAuthError错误求助

核心问题出在**interaction_in_progress错误**和组件状态更新未触发跳转逻辑上：MSAL的登录交互还未完成时，代码重复调用了loginRedirect，加上useEffect仅执行一次，导致登录成功后状态更新无法触发跳转，页面卡住空白。

1. 修复useEffect依赖项 #

原代码的useEffect空数组依赖只会在组件挂载时执行一次，登录成功后isAuthenticated状态更新不会重新触发跳转逻辑。需要将isAuthenticated加入依赖数组：

useEffect(()=>{
  if(isAuthenticated)
    redirectToDashboard()
  else
    checkAndLogin()
},[isAuthenticated]) // 加入isAuthenticated作为依赖

2. 避免重复调用loginRedirect #

调用登录接口前，先检查是否已有活跃账户或MSAL正在处理交互，防止重复触发导致错误：

const checkAndLogin = () => {
  const activeAccount = instance.getActiveAccount();
  // 无活跃账户且无正在进行的交互时，才发起登录
  if (!activeAccount && !instance.getActiveInteraction()) {
    instance.loginRedirect(loginRequest).catch((e:any) => {
      console.log(e);
    });
  }
}

3. 在_app.tsx中处理登录回调 #

MSAL重定向返回后，必须完成handleRedirectPromise处理才能更新登录状态。在你的_app.tsx中添加以下逻辑：

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

function MyApp({ Component, pageProps }) {
  const { instance } = useMsal();

  useEffect(() => {
    const handleRedirect = async () => {
      try {
        // 处理重定向回来的授权码，完成登录流程
        await instance.handleRedirectPromise();
      } catch (e) {
        console.error("重定向处理失败:", e);
      }
    };

    handleRedirect();
  }, [instance]);

  return <Component {...pageProps} />;
}

export default MyApp;

4. 验证redirectUri配置 #

确保msalConfig中的redirectUri与Azure门户注册应用的重定向URI完全一致，且/admin/dashboard是有效的Next.js路由页面。

这些修改的作用：

• 加入isAuthenticated依赖后，登录成功状态变化会自动触发跳转逻辑
• 账户与交互状态检查避免了重复调用登录接口，解决interaction_in_progress错误
• handleRedirectPromise完成重定向后的授权处理，确保MSAL状态正确更新，让useIsAuthenticated能准确返回登录状态

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