vue项目监听用户关闭窗口前，发送后端请求

vue项目监听用户关闭窗口前，发送后端请求
现有一个需求，在一个页面，用户直接关闭浏览器窗口时，需要调用后台接口解锁，这个接口需要传参，也需要携带用户token校验，试了一下用beforeunload事件和xhr同步请求，结果不理想，也考虑了用Navigator.sendBeacon()，但好像没搜到怎么携带Authorization，请问有朋友有处理过这种需求的吗

你可以参考一下这个


<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    window.addEventListener("beforeunload", this.onBeforeUnload);
  },
  beforeDestroy() {
    window.removeEventListener("beforeunload", this.onBeforeUnload);
  },
  methods: {
    onBeforeUnload() {
      // 构造请求参数
      const data = {
        // 根据需要携带的参数构造数据
      };

      // 将数据转换为 FormData，方便后端处理
      const formData = new FormData();
      Object.keys(data).forEach((key) => {
        formData.append(key, data[key]);
      });

      // 发送请求
      this.sendBeaconRequest(formData);
    },
    sendBeaconRequest(formData) {
      // 在这里使用Navigator.sendBeacon()方法发送请求
      const url = "https://your-backend-api-url.com/unlock"; // 后端接口地址
      const headers = {
        Authorization: "Bearer " + localStorage.getItem("token"), // 替换成获取用户token的逻辑
      };

      // 将headers转换成字符串
      const headersString = Object.entries(headers)
        .map(([key, value]) => `${key}: ${value}`)
        .join("\r\n");

      // 将headersString和formData拼接成Blob对象
      const blobParts = [headersString, "", formData];
      const blobOptions = { type: "application/json" };
      const blob = new Blob(blobParts, blobOptions);

      // 使用Navigator.sendBeacon()发送请求
      const result = navigator.sendBeacon(url, blob);

      // 根据result的值来判断请求是否发送成功
      if (result) {
        console.log("请求发送成功");
      } else {
        console.log("请求发送失败");
      }
    },
  },
};
</script>

你可以尝试以下方法来实现在用户关闭窗口前发送后端请求并携带身份验证信息：

使用beforeunload事件：在Vue项目中，你可以在需要发送请求的组件中监听beforeunload事件，并在事件处理程序中发送请求。请确保在发送请求之前获取用户的身份验证信息（如token），并将其添加到请求头中。

mounted() {
  window.addEventListener('beforeunload', this.sendRequest);
},
methods: {
  sendRequest() {
    const token = this.getToken(); // 获取用户token
    const headers = {
      Authorization: token // 添加token到请求头
    };
    
    axios.post('api/your-endpoint', data, { headers })
      .then(response => {
        // 处理响应
      })
      .catch(error => {
        // 处理错误
      });
  },
  getToken() {
    // 从本地存储或其他地方获取用户token
  }
}

请注意，这种方法仍然有一些局限性，因为浏览器不会等待异步请求完成就关闭窗口。因此，你可能需要借助其他方法来增加请求的可靠性。

使用Navigator.sendBeacon()：sendBeacon()方法可以在页面关闭时异步发送请求，但它不支持自定义请求头。为了将身份验证信息传递给后端，你可以在请求体中添加对应的参数。

window.addEventListener('beforeunload', function(e) {
  const token = getToken(); // 获取用户token
  const data = new FormData();
  data.append('token', token);
  
  navigator.sendBeacon('api/your-endpoint', data);
});

在后端接口的实现中，你可以根据请求体中的参数进行校验。

需要注意的是，sendBeacon()方法并不适用于需要获取响应的情况，它仅用于发送数据并告知服务器即将关闭页面。

还有一种方法是使用WebSocket来与后端建立实时连接，在用户关闭窗口前发送请求。这需要更多的配置和开发工作，但可以实现可靠的实时通信。

希望以上信息对你有所帮助！