vue两种方式实现：用户长时间不操作退出到登录页

问题描述

产品说，出于安全考虑，用户长时间不操作，就回到登录页面，让用户重新登录，就像银行的app一样。本文就记录一下实现这种效果的两种方式，分别是前端控制和后端控制，各有细节及适用使用场景

前端控制（方式一）

思路

首先，用户长时间不操作具体表现形式是啥？其实就是事件是否长时间没有被触发执行。

比如用户长时间不操作，就没有鼠标点击(click)事件、鼠标滚轮(mousewheel)事件、鼠标移动(mousemove)事件之类的，我们只需要监听这些事件，如果这些事件长时间没有触发，就说明用户长时间未操作，然后路由跳转到登录页面即可。

这三个事件我选择的是比较实用的鼠标点击事件，我们知道，一般来说项目的第一个页面是登录页面，所以在登录页面用户点击登录按钮的时候，就记录一下点击登录按钮的时间，存储到sessionstorage中去，当跳转到主页面的时候，当用户每点击一次页面，就更新一下sessionstorage中的存储的时间，同时也给页面绑定一个循环定时器，间隔一段时间就把当前时间和sessionstorage储存的上一次点击事件的时间做一个差值对比，当差值超过一定时间，就强制用户退出到登录页面即可。

代码

login.vue页面

// html
点击登录

// js
methods: {
    loginIn() {
      // 存第一份点击的时间
      sessionStorage.setItem("lastClickTime", new Date().getTime());
      // 模拟后端返回存一个token
      sessionStorage.setItem('token',"token")
      this.$router.push({
        path: "/",
      });
    },
}

Home.vue页面

这里注意一下，层级对应关系，我项目搭建的层级关系是Home.vue页面是App.vue页面的里面一层，也有对应的视图，视图对应的也是整个页面的关系。根据层级和路由表路由视图router-view关系，选择合适的层级去绑定对应的点击事件和定时器即可。

即层级关系是要选择和login.vue层级平行的下一级才行，否则就会在login.vue页面也会执行定时器和点击绑定事件了

效果图

后端控制（方式二）

思路

这种后端控制方式限制性没有前端控制强，但是也是可以用的。

我们知道用户长时间不操作就不会有发请求，这种方式我们和后端商定如下：

当用户这一次的请求和上一次请求的间隔时间超过一定时间，比如超过半小时。那么后端返回的状态码就不是200了，就是一个特殊的状态码，比如是4567这个状态码，那么我们在前端的响应拦截器中就可以加一个判断，如果状态码是4567就说明请求超时了，说明用户长时间未操作，这个时候直接路由跳转到登录页面即可

后端通过JWT机制去控制返回的状态码

代码

这里main.js中的Vue的实例对象我们将其挂载到全局对象window上，方便我们在响应拦截器中使用vm对象上的路由跳转方法

main.js文件

// 挂载到window对象上
window.vm = new Vue({
    store,
    router,
    render: h => h(App),
}).$mount('#app')

响应拦截器文件

http.interceptors.response.use((res) => {
    console.log('注册到全局上',vm);
    var code = res.data.code;
    if(code == 4567){ // 4567是超时状态码，看到这个标识我们就让用户退出登录
        // 注意，这个时候路由跳转就不是this.$router.push()了
        vm._router.push({ path: "/login" });
    }
    return res.data
}, (error) => {
    // console.log(error)
    return Promise.reject(error);
})

打印vm实例对象

所以在响应拦截器中路由跳转变成了 vm._router.push({ path: "/login" })了

总结

上述两种方式的思路都可以使用，具体使用哪种方式，视情况而定