【vue】切换窗口,判断token是否改变,改变则刷新页面

在App.vue页面中操作

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import { getoldToken, setoldToken, getToken } from "@/utils/auth";

export default {
  name: "App",
  mounted() {
    /*浏览器标签页切换会触发"visibilitychange"事件*/
    document.addEventListener("visibilitychange", this.handleVisiable);
  },
  destroyed() {
    document.removeEventListener("visibilitychange", this.handleVisiable);
  },
  methods: {
    handleVisiable(e) {
      /*处理逻辑*/
      //1、如果要发送请求,那么最好用navigator.sendBeancon(url),它可以保证在浏览器页面销毁前,将请求发送出去。如果使用XMLHttprequest或者基于它实现的axios发送请求,那么可能出现浏览器关闭了,但是请求没有发送出去的情况。
      //2、如果单纯监听切换浏览器标签页、单纯监听刷新页面,那么可以使用axios发送请求
      //3、navigator.sendBeancon(url)默认发送POST请求
      //4、举例如下:
      // const URL = process.env.VUE_APP_BASE_API + "/uploads/deleteAll";
      // navigator.sendBeacon(URL);
      switch (e.target.visibilityState) {
        case "prerender":
          // console.log("网页预渲染,内容不可见");
          break;
        case "hidden":
          // console.log("内容不可见,处理后台、最小化、锁屏状态");
          // alert("警告!你已经离开当前答题页面");
          setoldToken(getToken("vue_DEJIAN__token"));
          break;
        case "visible":
          // console.log("处于正常打开");
          if (
            getToken("vue_DEJIAN__token") !==
            getoldToken("vue_DEJIAN__Old_token")
          ) {
            location.reload();
          } 
          break;
      }
    },
  },
};
</script>

<style lang="scss"></style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值