关闭浏览器触发监听器，向后端发送请求

关闭浏览器触发监听器，向后端发送请求

1、需求前提

项目使用Vue + SpringBoot搭建的前后端分离项目，后端存储用户登录信息和Token。现在的需求是，多端只可以有一个用户登录，当一个用户关闭浏览器或者关闭标签页时，向后端发送请求删除该用户的登录信息，以此来解决用户及时下线的目的。

2、解决方案

直接上代码

mounted() {
    window.addEventListener('beforeunload', (e) => this.beforeUnload(e));
    // 添加关闭浏览器触发器
    window.addEventListener('unload', this.logout);
},
methods: {
    beforeUnload(e) {
      e = e || window.event;
      if (e) {
        e.returnValue = '关闭提示';
      }
      return '关闭提示';
    },
    // 关闭浏览器标签触发
    logout() {
      fetch('/login/loginOut?userId=admin'), {
        method: 'GET',
        headers: {'Content-Type': 'application/json'},
        keepalive: true
      });
    },

重点1：

window.addEventListener('beforeunload', (e) => this.beforeUnload(e));
// 点击 <button>离开</button> 按钮时触发
window.addEventListener('unload', this.logout);

其中下面这句话很重要，它会在用户点击关闭浏览器或者关闭标签页，弹出提示信息：是否确认离开。点击取消按钮时不会触发第二个监听器，点击离开按钮时，则会触发下面的监听器。
重点2：

// 关闭浏览器标签触发
 logout() {
   fetch('/login/loginOut?userId=admin'), {
     method: 'GET',
     mode: 'no-cors',   // 重点一定要注意
     headers: {'Content-Type': 'application/json'},
     keepalive: true
   });
 },

可能你也观察到了，我使用了fetch请求，那是因为axios异步请求在这里不起作用！(PS: 浪费了好多时间。)
同时，fetch请求最大支持** 64KB**的请求体，所以注意传参的载荷。
同时如果是前后端分离项目，一定加上跨域设置 no-cors。否则部署线上则会出现跨域异常。

3、实际项目中的源码

mounted() {
    // 添加关闭浏览器触发器
    window.addEventListener('beforeunload', (e) => this.beforeUnload(e));
    window.addEventListener('unload', this.logout);
}
methods: {
	beforeUnload(e) {
	      e = e || window.event;
	      if (e) {
	        e.returnValue = '关闭提示';
	      }
	      return '关闭提示';
	},
	// 关闭浏览器标签触发
	logout() {
		  // 运行环境
		  let baseURL = process.env.VUE_APP_URL;
		  if (process.env.NODE_ENV === "production") {
		    baseURL = window.Glob.BaseUrl + process.env.VUE_APP_API;
		  }
		  fetch(baseURL + '/login/loginOut?userId=admin', {
		    method: 'GET',
		    mode: 'no-cors',
		    headers: {'Content-Type': 'application/json'},
		    keepalive: true
		  });
	},
}

问题：刷新和关闭浏览器标签时都会触发，暂时无法限制刷新页面不触发该事件，有想法的小伙伴请留言呢。

4、最后

到这里前端基本就写完了，只要关闭浏览器或者关闭标签页，则会触发这个监听器并发送请求到后端，只要后端收到了这个请求，则证明fetch请求是没有问题。
经过线上测试：谷歌、360和edge没有问题，但是火狐无法实现这功能，由于对火狐不是很了解，只能草草收场。

因为自己是主导后端开发，所以对于window.event过时问题，或者fetch请求问题，还有好多不理解的地方，有擅长的小伙伴可以在下方留言。