OAuth 2登录成功后如何强制关闭登录使用的浏览器标签页

核心前提 #

受浏览器安全策略限制，仅由JavaScript主动打开的标签/窗口，才允许被脚本主动关闭，用户手动输入地址、从书签打开的标签页无法被强制关闭，所有方案均基于该限制实现。

方案1：新开窗口加载OAuth授权页（最稳定） #

这是业内最常用的标准实现方案：

• 前端触发登录操作时，不要在当前页面跳转授权地址，用window.open(授权URL, '_blank', 'width=800,height=600')新开独立窗口加载OAuth授权流程
• OAuth授权完成后跳转到你的同域回调页，回调页的逻辑直接执行以下两步：
  1. 通过window.opener向父窗口（你的主应用页面）传递登录凭证、更新主应用登录状态
  2. 执行window.close()直接关闭当前授权窗口/标签页
• 优点：无跨域限制风险，不会干扰主应用当前的页面状态，兼容性覆盖所有主流浏览器

方案2：当前页跳转授权的兼容实现 #

如果业务场景不允许新开窗口，只能在当前页跳转授权，可以用本地存储标记实现：

• 跳转授权页前，在sessionStorage中写入oauth_login_process = '1'的标记
• 授权完成跳转回你的应用回调页后，先校验登录状态是否有效，再读取sessionStorage中的标记：
  1. 标记存在且登录成功：直接执行window.close()关闭当前页
  2. 标记不存在：跳过关闭逻辑，避免误关用户正常打开的应用标签
• 注意：回调页需要是仅用于OAuth登录跳转的独立路由，不要和用户日常访问的业务路由复用，防止出现正常访问页面被误关的问题

浏览器拦截兼容处理 #

如果遇到部分浏览器拦截window.close()调用的情况，可以在关闭前增加一行兜底代码，绕过大部分拦截规则：

window.open('', '_self', '');
window.close();

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