vue 退出登录,vue用户登录后根据权限跳转页面
出于安全考虑，如果用户长时间不操作，会返回登录页面，让用户重新登录。本文将记录两种达到这种效果的方法，有一定的参考价值，有兴趣的可以了解一下。
目录
问题描述前端控制(模式1)意见代码后端控制(模式2)意见代码摘要
问题描述
该产品表示，出于安全考虑，如果用户长时间不操作，会返回登录页面，让用户重新登录，就像银行的app一样。本文记录了实现这种效果的两种方式，即前端控制和后端控制，每种方式都有细节和适用的使用场景。
前端控制（方式一）
思路
首先，用户长时间不操作的具体表现是什么？其实就是事件是否长时间没有被触发。
比如用户长时间不操作，就不会有鼠标点击事件，鼠标滚轮事件，鼠标移动事件之类的。我们只需要监控这些事件。如果长时间没有触发这些事件，说明用户长时间没有操作，然后我们就可以路由到登录页面了。
我为这三个事件选择了实用的鼠标点击事件。我们知道，一般来说，一个项目的第一页就是登录页，所以当用户在登录页点击登录按钮时，记录下点击登录按钮的时间，并存储在sessionstorage中。跳转到主页时，每次用户单击页面时，sessionstorage中存储的时间都会更新。同时，一个循环计时器被绑定到页面。每隔一段时间，将当前时间与sessionstorage存储的上次单击事件的时间进行比较。当差值超过一定时间时，用户将被强制退出登录页面。
代码
login.vue页面
//html
El-button type= primary @ Click= log in 单击登录/el-button
//js
方法：{
登录(){
//保存第一次点击的时间
session storage . setitem( last click time ，新日期()。getTime())；
//模拟后端返回并存储令牌
sessionStorage.setItem(token ， token )
这个。$router.push({
路径：“/”，
});
},
}
Home.vue页面
模板
div class=homeBox
！-左边是菜单层级-
div class=left
div class=leftNav
el菜单
:default-active=activeIndex
埃尔梅努
background-color=#333
text-color=#B0B0B2
active-text-color=#fff
:unique-opened=true
路由器
ref=elMenu
El-菜单项索引=/vue
I class= El-icon-location-outline /I
Span slot=titlevue page /span
/El-菜单项
El-菜单项索引=/react
i class=el-icon-star-off/i
Span slot=title 反应页面/span
/El-菜单项
El-菜单项索引=/angular
I= El-icon-pear /I
Span slot=title 角页/span
/El-菜单项
/el-menu
/div
/div
！-右边是视图层次结构-
div class=右
div class=rightTop
El-button type= primary plain @ click= log in out logout/El-button
/div
div class=rightBottom
路由器视图/路由器视图
/div
/div
/div
/模板
脚本
导出默认值{
姓名：家，
data() {
返回{
activeIndex:这个。$route.path，
计时器：空，
};
},
已创建(){
/*
第一步：
当组件被初始化和加载时，它必然会监听点击事件。注意：此处添加了addEventListener的第三个参数。
因为第三个参数决定是冒泡还是捕获(假冒泡默认，真捕获)，而且因为绑定监听点击事件，所以我们在最
顶层的DOM位置捕获单击事件，因此应该添加第三个参数true，在本例中，单击事件发生在内层的任何地方
我们都可以监控它，然后存储点击时间。
*/
window.addEventListener(
点击，
()={
//为了方便，我们将click事件的时间直接保存到sessionStorage中，方便比较。
session storage . setitem( last click time ，新日期()。getTime())；
},
真实的
);
},
已安装(){
/*
第二步：
当组件被初始化和加载时，一个计时器被绑定，计时器定期轮询以比较当前时间和最后一次点击时间之间的差异。
*/
this . istimeout()；
},
方法：{
isTimeOut() {
//在使用定时器之前将其清零。
clear interval(this . timer)；
this.timer=setInterval(()={
let last click time=session storage . getitem( last click time )* 1；//将最后一次点击的字符串时间转换为数字时间。
让nowTime=新日期()。getTime()；//获取当前时间
Console.log(当前时间和上次点击时间，nowTime，last clicktime)；
//假设我们的要求是：5秒不点击，会提示登录退出。
if(now time-last click time 1000 * 5){
//提示用户
这个。$ message ({type: warning ，message:超时并注销 })；
//这里清空定时器，结束任务。
clear interval(this . timer)；
//最后返回登录页面
这个。$ router . push({ path:/log in })；
}
}, 1000);
},
},
销毁前(){
//最后一步，当你离开页面的时候，清空定时器，解除click事件的绑定。
clear interval(this . timer)；
window . removeeventlistener( click ，()={}，true)；
},
};
/脚本
这里，注意层次对应。我的项目构建的层级关系是Home.vue页面是App.vue页面的内层，也有对应的视图，对应整个页面。根据层次结构和路由表的router-view之间的关系，选择合适的层次结构来绑定相应的click事件和定时器。
即层次关系是选择与login.vue层次平行的下一个层次，否则定时器和点击绑定事件也会在login.vue页面上执行。
翻译
后端控制（方式二）
思路
这种后端控制方法没有前端控制那样严格，但是可以使用。
我们知道用户长时间不操作是不会发请求的。这样我们就同意后端如下：
当用户本次请求与上次请求的时间间隔超过一定时间，如超过半小时。那么后端返回的状态码不是200，或者是特殊的状态码，比如4567。然后我们可以给前端响应拦截器添加一个判断。如果状态码是4567，说明请求超时，说明用户很久没有操作了。这时候我们可以直接路由，跳转到登录页面。
后端通过JWT机制控制返回的状态码。
代码
这里我们在全局对象窗口挂载main.js中Vue的实例对象，这样就可以在响应拦截器中对vm对象使用route jump方法。
Main.js文件
//将其安装在窗口对象上
window.vm=new Vue({
店，
路由器，
render: h=h(App)，
}).$ mount(“# app”)
响应拦截器文件
http . interceptors . response . use((RES)={
Console.log(全局注册，VM)；
var code=RES . data . code；
If(code==4567){ //4567是超时状态代码。当我们看到这个标志时，我们会让用户注销。
//注意路由跳转不是这个。$router.push()此时。
vm。_ router . push({ path:/log in })；
}
返回结果数据
}，(错误)={
//console.log(错误)
return Promise.reject(错误)；
})
打印虚拟机实例对象
所以响应拦截器中的路由跳转变成了VM。_ router.push ({path:/login})
总结
以上两种思维方式都可以，具体使用方式要看情况。
关于vue用户登录页面长时间不操作的两种实现方式的文章到此为止。更多相关vue长时间没有运营的用户，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。