跳转到外部URL登录后无法返回Angular应用的问题咨询

针对你遇到的外部登录后无法跳转回Angular首页的问题，可尝试以下几种方案：

• 传递回调地址参数给外部登录接口
  多数第三方登录系统支持通过URL参数指定登录成功后的跳转地址，你可以修改跳转代码，将Angular应用的首页地址作为参数传递给外部登录URL。比如：

  effettuaLoginExternal(event) {
    // 编码回调地址避免特殊字符问题
    const redirectUrl = encodeURIComponent(window.location.origin);
    window.location.href = `/external/login?redirect_uri=${redirectUrl}`;
  }
  

  注意：不同系统的回调参数名称可能不同，常见的有redirect_uri、returnUrl、callbackUrl，如果这个参数无效，需要确认外部系统的参数命名规则。

• 联系外部系统对接方确认配置
  由于你没有外部系统的代码，最直接的方式是联系该系统的开发或维护人员，询问以下信息：

  • 登录成功后支持的跳转参数名称
  • 是否需要提前在外部系统配置允许跳转的白名单地址（避免跨域或安全限制）
  • 是否有其他回调逻辑要求（比如携带登录凭证的方式）

• 通过弹窗加载外部登录页（可选方案）
  如果外部系统允许在弹窗中打开，你可以在Angular中打开弹窗加载登录页，监听弹窗状态，当弹窗关闭时自动跳转回首页。同时配合回调地址参数，让外部系统跳转到Angular的一个中转页面，完成状态同步后再跳转到首页：

  effettuaLoginExternal(event) {
    const callbackUrl = encodeURIComponent(`${window.location.origin}/login-callback`);
    const loginWindow = window.open(`/external/login?redirect_uri=${callbackUrl}`, '_blank', 'width=600,height=400');
    
    // 定时检查弹窗是否关闭
    const checkInterval = setInterval(() => {
      if (loginWindow.closed) {
        clearInterval(checkInterval);
        // 跳转回Angular首页
        window.location.href = '/';
      }
    }, 1000);
  }
  

  然后在Angular中创建login-callback路由组件，组件逻辑可直接跳转到首页，若外部系统返回了登录凭证（比如URL中的token），也可在此处处理凭证存储。

• 请求外部系统配置默认跳转地址
  如果外部系统支持后台配置默认跳转地址，可请求对方将你的Angular应用首页地址设置为登录成功后的默认跳转目标。

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