使用msal-react实现React Web应用登录时出现无限循环问题

看起来你遇到了MSAL React登录后无限重定向的坑，我之前帮同事排查过几乎一模一样的问题，咱们一步步拆解原因和解决办法：

最常见的元凶：重定向回调未被正确处理 #

当用户从Azure AD登录页跳回你的blank.html再回到主站时，MSAL必须先处理这次重定向的结果——比如把获取到的token、账户信息存入缓存，更新内部状态。如果你的应用没有在启动时调用handleRedirectPromise()，MSAL就不知道用户已经完成登录了，accounts数组会一直是空的，inProgress状态也停留在None，导致你的useEffect又会触发新一轮登录流程，形成死循环。

解决办法： #

在应用的入口文件（比如index.js或者根组件App.js）里，一定要在MSAL实例初始化后，立刻调用这个方法处理重定向结果：

// 比如在App组件的useEffect里
useEffect(() => {
  const handleMsalRedirect = async () => {
    try {
      // 处理重定向回调，更新MSAL的内部状态
      await instance.handleRedirectPromise();
    } catch (err) {
      console.error("处理登录重定向结果失败:", err);
    }
  };
  handleMsalRedirect();
}, [instance]);

同时，你原来的useEffect依赖是[]，这会导致组件挂载时只执行一次，但重定向回来后组件可能重新挂载，而且完全忽略MSAL的状态变化。建议把inProgress和accounts加入依赖数组，并且加个判断：只有当没有交互在进行，且没有已登录账户时，才触发登录：

useEffect(() => {
  // 只在无交互、无已登录账户时触发登录逻辑
  if (inProgress === InteractionStatus.None && accounts.length === 0) {
    const idTokenRequest = {
      ...silentRequest,
      account: accounts[0],
    };
    instance
      .acquireTokenSilent(idTokenRequest)
      .then(({ account }) => {
        // 你的业务代码
      })
      .catch((error) => {
        // 只有当确实需要交互登录时，才触发重定向
        if (error instanceof InteractionRequiredAuthError) {
          try {
            instance.acquireTokenRedirect(idTokenRequest);
          } catch (redirectErr) {
            console.log("redirect failed");
            throw redirectErr;
          }
        } else {
          // 其他错误（比如网络问题），不要触发重定向，避免循环
          openRoleBasedPopup("default");
          setIsAuthorized(false);
        }
      });
  }
}, [inProgress, accounts, instance, silentRequest]);

第二个可能的问题：blank.html和重定向URI配置不匹配 #

你按照文档设置了/blank.html作为重定向URI，但要确保两个地方的配置完全一致：

• 首先，在Azure AD的应用注册里，必须把https://你的域名/blank.html添加为Single-page application类型的重定向URI；
• 其次，你的MSAL实例配置里的redirectUri必须和上面的地址完全一致，比如：

const msalConfig = {
  auth: {
    clientId: "你的客户端ID",
    authority: "https://login.microsoftonline.com/你的租户ID",
    redirectUri: "/blank.html", // 要和Azure AD里的配置完全匹配
  },
};

如果这里配置不一致，MSAL处理重定向时会失败，导致账户状态无法更新，进而触发循环。

第三个坑：登录逻辑的条件判断有漏洞 #

你原来的代码里，不管有没有已登录账户，只要inProgress是None就尝试调用acquireTokenSilent——但这个方法需要已存在的账户才能静默获取token，如果accounts是空的，这个调用一定会失败，进而触发acquireTokenRedirect，形成循环。

优化逻辑： #

先判断是否有已登录账户，没有的话直接调用loginRedirect，而不是先尝试静默获取：

if (inProgress === InteractionStatus.None) {
  if (accounts.length === 0) {
    // 没有账户，直接触发登录重定向
    instance.loginRedirect({ redirectUri: "/blank.html" });
  } else {
    // 有账户，再尝试静默获取token
    const idTokenRequest = {
      ...silentRequest,
      account: accounts[0],
    };
    // 后续的acquireTokenSilent逻辑
  }
}

最后可以排查的点：token缓存是否正常 #

打开浏览器的开发者工具，进入Application -> Local Storage，看看有没有以msal.你的客户端ID开头的缓存项。如果没有，说明MSAL没有正确存储登录状态，可能是浏览器禁止了本地存储，或者存在隐性的跨域问题（比如blank.html和主站的子域名不一致）。

内容来源于stack exchange