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

Question

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

Answer 1

你可以参考一下这个

<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>