vue⽤户长时间不操作退出到登录页的两种实现⽅式
⽬录
问题描述
前端控制（⽅式⼀）
思路
代码
后端控制（⽅式⼆）
思路
代码
总结
问题描述
产品说，出于安全考虑，⽤户长时间不操作，就回到登录页⾯，让⽤户重新登录，就像银⾏的app⼀样。本⽂就记录⼀下实现这种效果的两种⽅式，分别是前端控制和后端控制，各有细节及适⽤使⽤场景
前端控制（⽅式⼀）
思路
⾸先，⽤户长时间不操作具体表现形式是啥？其实就是事件是否长时间没有被触发执⾏。
⽐如⽤户长时间不操作，就没有⿏标点击(click)事件、⿏标滚轮(mousewheel)事件、⿏标移动(mousemove)事件之类的，我们只需要监听这些事件，如果这些事件长时间没有触发，就说明⽤户长时间未操作，然后路由跳转到登录页⾯即可。
这三个事件我选择的是⽐较实⽤的⿏标点击事件，我们知道，⼀般来说项⽬的第⼀个页⾯是登录页⾯，所以在登录页⾯⽤户点击登录按钮的时候，就记录⼀下点击登录按钮的时间，存储到sessionstorage中去，当跳转到主页⾯的时候，当⽤户每点击⼀次页⾯，就更新⼀下sessionstorage中的存储的时间，同时也给页⾯绑定⼀个循环定时器，间隔⼀段时间就把当前时间和sessionstorage储存的上⼀次点击事件的时间做⼀个差值对⽐，当差值超过⼀定时间，就强制⽤户退出到登录页⾯即可。
代码
login.vue页⾯
// html
<el-button type="primary" @click="loginIn">点击登录</el-button>
// js
methods: {
loginIn() {
// 存第⼀份点击的时间
sessionStorage.setItem("lastClickTime", new Date().getTime());
// 模拟后端返回存⼀个token
sessionStorage.setItem('token',"token")
this.$router.push({
path: "/",
});
},
}
Home.vue页⾯
<template>
<div class="homeBox">
<!-- 左边是菜单层级 -->
<div class="left">
<div class="leftNav">
react router 和vue router<el-menu
:
default-active="activeIndex"
class="elMenu"
background-color="#333"
text-color="#B0B0B2"
active-text-color="#fff"
:unique-opened="true"
router
ref="elMenu"
>
<el-menu-item index="/vue">
<i class="el-icon-location-outline"></i>
<span slot="title">vue页⾯</span>
</el-menu-item>
<el-menu-item index="/react">
<i class="el-icon-star-off"></i>
<span slot="title">react页⾯</span>
</el-menu-item>
<el-menu-item index="/angular">
<i class="el-icon-pear"></i>
<span slot="title">angular页⾯</span>
</el-menu-item>
</el-menu>
</div>
</div>
<!-- 右边是视图层级 -->
<div class="right">
<div class="rightTop">
<el-button type="primary" plain @click="loginOut">登出</el-button>
</div>
<div class="rightBottom">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
activeIndex: this.$route.path,
timer: null,
};
},
created() {
/*
第⼀步：
组件初始化加载就绑定监听点击事件，注意：addEventListener的第三个参数，这⾥要加上。
因为第三个参数决定了是冒泡还是捕获（false冒泡默认，true捕获），因为绑定监听点击事件，我们是在最
顶层的DOM位置进⾏捕获点击事件，所以第三个参数true，要加上的，这样的话，内层的任意地⽅的点击事件我们就都能监听到了，然后存储⼀下点击的时间
*/
window.addEventListener(
"click",
() => {
// 为了⽅便，我们把点击事件的时间直接存到sessionStorage中去，这样⽅便获取⽐较
sessionStorage.setItem("lastClickTime", new Date().getTime());
},
true
);
},
mounted() {
/*
第⼆步：
组件初始化加载时也要绑定⼀个定时器，通过定时器定时轮询，去对⽐当前时间和上次点击的时间的差值
*/
this.isTimeOut();
},
methods: {
isTimeOut() {
// 使⽤定时器之前，要清除⼀下定时器
clearInterval(this.timer);
this.timer = setInterval(() => {
let lastClickTime = Item("lastClickTime") * 1; // 把上次点击时候的字符串时间转换成数字时间        let nowTime = new Date().getTime(); // 获取当前时间
console.log("当前时间和之前点击时间", nowTime, lastClickTime);
// 假设我们需求是：5秒钟不进⾏点击操作，就提⽰登录退出
if (nowTime - lastClickTime > 1000 * 5) {
// 提⽰⼀下⽤户
this.$message({ type: "warning", message: "超时了，已退出登录" });
// 这⾥要清除定时器，结束任务
clearInterval(this.timer);
// 最后返回到登录页
this.$router.push({ path: "/login" });
}
}, 1000);
},
},
beforeDestroy() {
/
/ 最后⼀步，离开页⾯的时候，清除⼀下定时器，也解绑点击事件
clearInterval(this.timer);
},
};
</script>
这⾥注意⼀下，层级对应关系，我项⽬搭建的层级关系是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')
响应⽂件
sponse.use((res) => {
console.log('注册到全局上',vm);
var code = de;
if(code == 4567){ // 4567是超时状态码，看到这个标识我们就让⽤户退出登录
/
/ 注意，这个时候路由跳转就不是this.$router.push()了
vm._router.push({ path: "/login" });
}
return res.data
}, (error) => {
// console.log(error)
ject(error);
})
打印vm实例对象
所以在响应中路由跳转变成了vm._router.push({ path: "/login" })了
总结
上述两种⽅式的思路都可以使⽤，具体使⽤哪种⽅式，视情况⽽定
到此这篇关于vue⽤户长时间不操作退出到登录页的两种实现⽅式的⽂章就介绍到这了，更多相关vue⽤户长时间不操作退出内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。