Zoho Catalyst React应用登录后首页(UserProfile)无限循环重载问题

问题根源分析 #

你遇到的无限重载循环，主要由两个代码问题导致：

1. 配置对象未正确赋值
   你的代码里先声明了const config = {};，但后续的配置参数块没有赋值给config，导致传入catalyst.auth.signIn的是空对象。SDK无法读取正确的跳转配置，会触发异常的页面跳转逻辑。

2. 登录成功跳转页与登录页重复
   如果service_url设置为当前页面（/app/index.html），而该页面同时包含登录iframe的初始化代码，登录成功后跳转回此页面时，代码会再次执行catalyst.auth.signIn。此时SDK检测到用户已登录，可能会重复触发跳转，形成循环。

修复方案 #

1. 修正配置对象的语法错误

把配置参数正确赋值给config变量，移除多余的注释和语法错误：

<script src="https://static.localzohocdn.com/catalyst/sdk/js/4.2.0/catalystWebSDK.js"> </script>
<script src="/__catalyst/sdk/init.js"> </script>
<script>
  const config = {
    css_url: "/app/css/embeddediframe.css", 
    service_url: "/app/user-profile.html", // 改为独立的首页地址，不要和登录页面相同
    is_customize_forgot_password: true, 
    forgot_password_id: "forgotPasswordDivElementId", 
    forgot_password_css_url: "/app/css/forgotPwd.css" 
  };
</script>

2. 分离登录逻辑与首页，添加登录状态判断

• 将登录页面和首页（UserProfile）拆分为两个独立页面，登录页面仅负责加载登录iframe，首页不包含登录初始化代码。
• 如果必须在同一页面处理，添加登录状态判断，仅当用户未登录时才渲染登录iframe：

<script src="https://static.localzohocdn.com/catalyst/sdk/js/4.2.0/catalystWebSDK.js"> </script>
<script src="/__catalyst/sdk/init.js"> </script>
<script>
  const config = {
    css_url: "/app/css/embeddediframe.css", 
    service_url: "/app/index.html",
    is_customize_forgot_password: true, 
    forgot_password_id: "forgotPasswordDivElementId", 
    forgot_password_css_url: "/app/css/forgotPwd.css" 
  };

  // 先检查登录状态，未登录时才加载登录iframe
  catalyst.auth.isAuthenticated().then(isAuthenticated => {
    if (!isAuthenticated) {
      catalyst.auth.signIn("loginDivElementId", config);
    }
  });
</script>

验证步骤 #

1. 确认service_url指向的页面不再包含登录iframe的初始化代码
2. 测试登录流程，登录成功后跳转至首页，检查是否停止循环
3. 若仍有问题，打开浏览器开发者工具的控制台，查看是否有SDK相关的错误提示，排查配置路径是否正确

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