JS如何获取GET请求URL并在登出时阻止window.unbeforeunload事件触发

注意你提到的window.unbeforeunload应为拼写错误，正确的页面离开事件是window.beforeunload

方案1：标志位控制（优先推荐） #

该方案不需要拦截全局请求，改造成本最低：

• 声明全局控制变量：let isLogout = false
• 给登出按钮绑定点击事件，点击时直接将isLogout设置为true，如果登出是接口请求跳转的场景，就在接口请求成功的回调中再修改该变量
• 在beforeunload事件逻辑中优先判断标志位，为true时直接跳过提示逻辑：

window.addEventListener('beforeunload', (e) => {
  if (isLogout) return
  // 原有触发提示的逻辑
  e.preventDefault()
  e.returnValue = ''
  return ''
})

方案2：拦截全局请求获取URL（符合你最初的思路） #

JS完全可以在请求执行前获取到请求URL，针对不同的请求类型分别拦截即可：

拦截fetch请求 #

重写原生fetch方法：

const originalFetch = window.fetch
window.fetch = function(...args) {
  const requestUrl = args[0]
  // 匹配登出地址
  if (requestUrl.includes('https://www.example.com/logout')) {
    window.isLogout = true
  }
  return originalFetch.apply(this, args)
}

拦截XMLHttpRequest请求 #

重写XMLHttpRequest的open方法：

const originalOpen = XMLHttpRequest.prototype.open
XMLHttpRequest.prototype.open = function(method, url, ...rest) {
  if (url.includes('https://www.example.com/logout')) {
    window.isLogout = true
  }
  return originalOpen.apply(this, [method, url, ...rest])
}

拦截a标签跳转类登出 #

如果登出是a标签直接跳转的场景，监听全局点击事件判断跳转地址：

document.addEventListener('click', (e) => {
  const targetLink = e.target.closest('a')
  if (targetLink && targetLink.href.includes('/logout')) {
    window.isLogout = true
  }
})

完成拦截逻辑后，还是和方案1一致，在beforeunload事件中判断isLogout标志位控制是否弹出提示即可。

注意事项 #

• 目前大部分现代浏览器会忽略beforeunload事件中自定义的提示文本，只会展示浏览器默认的离开提示，只要控制事件返回值即可正常触发提示
• 全局请求拦截的逻辑需要放在所有业务代码执行前初始化，避免漏拦截页面加载初期就发出的请求

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