Angular中弹窗关闭触发函数及OAuth登录逻辑问题求助

我明白你的问题了——你现在的OAuth授权弹窗刚打开，回调里的检查逻辑就立刻执行了，根本没等用户在弹窗里完成授权操作对吧？这是因为你在openAuthPopup函数里调用window.open之后马上就触发了callback()，完全没考虑弹窗的关闭时机。下面给你具体的解决方案：

第一步：修改弹窗打开函数，监听关闭事件 #

你需要保存弹窗的引用，通过定时轮询检查弹窗的closed属性，只有当弹窗确实关闭后再执行回调逻辑。修改后的openAuthPopup代码如下：

openAuthPopup(url: string, callback: () => void): void {
  // 打开弹窗并保存引用，同时设置合适的窗口大小
  const authPopup = window.open(url, '_blank', 'width=600,height=600,top=100,left=100');
  
  // 设置定时器轮询检查弹窗状态
  const popupCheckInterval = setInterval(() => {
    // 检查弹窗是否已关闭
    if (authPopup.closed) {
      clearInterval(popupCheckInterval); // 清除定时器，避免无效轮询
      callback(); // 弹窗关闭后执行回调逻辑
    }
  }, 500); // 每500毫秒检查一次，可根据需求调整间隔
}

第二步：保留原有的oauthLogin逻辑 #

你的oauthLogin函数里的回调逻辑是正确的，现在修改完openAuthPopup后，回调会在弹窗关闭后才执行，这样就能正确检查授权状态了：

oauthLogin(app: string) { 
  this.openAuthPopup( 
    '/assets/auth.html?socialApp=' + app, 
    () => { 
      if (this.SharedService.getAuthorization()) { 
        this.checkRegistrationStatus(); 
        this.SharedService.changeLoggedInStatus(true); 
        this.SharedService.changedisplayName(this.SharedService.getDispalyName()); 
        this.router.navigate(['home/dashboard']); 
      } 
    } 
  ); 
}

额外注意事项 #

• 同域限制：确保你的auth.html和主应用是同域的，否则可能会因为浏览器的跨域安全策略无法访问弹窗的closed属性（你的情况是放在assets目录下，属于同域，没问题）。
• 优化方案（可选）：如果需要在弹窗和主窗口之间传递授权数据（比如token），可以使用window.postMessage API，主窗口监听message事件，弹窗关闭前主动发送消息，这样可以替代轮询，效率更高。比如在auth.html里完成授权后添加：

  window.opener.postMessage({ authorization: true }, window.location.origin);
  window.close();
  

  然后在主应用的组件里监听消息：

  ngOnInit() {
    window.addEventListener('message', (event) => {
      if (event.origin === window.location.origin && event.data.authorization) {
        // 执行授权后的逻辑
        this.checkRegistrationStatus();
        // ...其他操作
      }
    });
  }
  

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