vue监听返回键

有这么一个应用场景，axios发送请求携带token,当后台检测到token过期（或者压根没有登录），返回相应的状态码。axios在响应拦截处判断状态码是不是以上情况，之后跳转到登录页面。

这里存在一个问题是：
a页面------>b页面 -------->生命周期函数（mounted）自动发起axios请求 ------>
返回token过期（未登录）------>直接跳转到 login页面 ------> 用户不登陆，并且点击了返回键(这个时候就出现了bug)----->返回b页面 -------->生命周期函数（mounted）自动发起axios请求 ------>
返回token过期（未登录）------>直接跳转到 login页面 ------>。。。。。。。。。。。。。
这个时候，用户已经陷入死循环，不能返回。

解决思路：监听物理返回键，之后回退两个页面，即router.go(-2) （普通返回就是router.go(-1)）

上代码

1、挂载完成后，判断浏览器是否支持popstate

mounted(){
  if (window.history && window.history.pushState) {
    history.pushState(null, null, document.URL);
    window.addEventListener('popstate', this.fun, false);//false阻止默认事件
  }
},

2、页面销毁时，取消监听。否则其他vue路由页面也会被监听

destroyed(){
  window.removeEventListener('popstate', this.fun, false);//false阻止默认事件
},

3、将监听操作写在methods里面，removeEventListener取消监听内容必须跟开启监听保持一致，所以函数拿到methods里面写

methods:{
  fun(){
    console.log("监听到了");
    //回退两个页面
    this.$router.go(-2);
  }
}```