禁止页面后退

发表于 | 更新于: | 分类于 | 阅读次数:
字数统计: 482 字 | 阅读时长 ≈ 2 分钟

在我们前端开发过程中，需要对接第三方公司内容，而且对接方式是通过页面的跳转，最后再跳转到我们前端页面。
这样就会出现一个问题，当我们使用后退功能时就会回退到第三方公司页面，或者出现频繁的跳转。

简单方法

假设第三方内容和我们没有跨域可直接使用 location.replace 方法。该方法只是不想让下一个地址回退到当前地址，不是彻底的禁用回退。

复杂方法

如果存在跨域，将会复杂很多，有时候还要根据具体情况具体问题具体分析。但是都是通过 history 来完成的。

1
2
3
4
 
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function() {
  history.pushState(null, null, document.URL);
});

这种方法是最好的方法，当然还有其他复杂方法（到上一个页面之后再前进回来、禁用键盘的backspace键），就不做介绍了。

接口重定向

该方法其实是location.replace的高级方法，这个方法不管是否两个地址跨域，都会在回退时不会回退到跳转前的地址。

可以用 node 或者 java 实现该接口。

在Vue中实现

  1. 给路由添加meta信息

    1
    		 
    meta: {allowBack: false},

  2. 在全局的router.beforeEach 函数里面获取allowBack的状态，同时更新vuex的allowBack的值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    		 
    let allowBack = true    //    给个默认值true
    if (to.meta.allowBack !== undefined) {
        allowBack = to.meta.allowBack
    }
    if (!allowBack) {
          history.pushState(null, null, location.href)
    }    
    store.dispatch('updateAppSetting', {
        allowBack: allowBack
    })

这段代码得写在next()的后面，因为写在next()前面location.href并不是to的地址

  1. 接下来就是最核心的了，在app.vue的mounted里面写onpopstate事件 
    1
    2
    3
    4
    5
    		 
    window.onpopstate = () => {
        if (!this.allowBack) {    //    这个allowBack 是存在vuex里面的变量
            history.go(1)
        }
    }

参考

https://blog.csdn.net/LuviaWu/article/details/83893585