最vue用户登录失效跳转登录页
不需要通过后端的token传的时间解析后来判断
思路:在用户登录后进入到布局页面,直接在页面创建后存时间戳,时间一到直接跳转到登录
一,第一种方法
1.在登录页面存当前时间戳
这里使用了封装,没有封装的通过Cookies.set(),存在会话存储还是本地存储还是cookies都行
this.$utils.cookies.set("loginTime",Date.now())
2.在布局页面layout使用定时循环来判断,完整代码
在这我设置了三个时间戳,存的登录时间,失效时间为登录时间相加,还有现在运行时间,注意一定要在跳转到登录页之前清除定时循环任务,不然定时任务还是会一直进行
-
created () {
-
this.cookiesTime()
-
},
-
methods(){
-
cookiesTime () {
-
// 登录时间
-
let loginTime = parseInt(this.$utils.cookies.get('loginTime'))
-
// 失效时间,0.01为0.01小时为36秒,24就是一天
-
let loseTime = loginTime 0.01 * 60 * 60 * 1000
-
// 现在时间
-
let newTime = Date.now()
-
this.$utils.cookies.set('loseTime', loseTime)
-
// 每次进入新页面时检查用户信息是否过期
-
let setInterId= setInterval(() => {
-
let loseTime = this.$utils.cookies.get('loseTime')
-
// 如果当前时间大于失效时间
-
if (Date.now() > loseTime) {
-
this.$utils.cookies.remove("token")
-
this.$utils.cookies.remove("uuid")
-
this.$utils.cookies.remove("loginTime")
-
this.$utils.cookies.remove("loseTime")
-
// this.$router.push("/login")
-
this.$alert('登录已失效,请重新登录', '提示', {
-
confirmButtonText: '确定',
-
callback: action => {
-
// 点击确定后清除定时器并且跳转登录页
-
clearInterval(setInterId)
-
this.$router.push("/login")
-
}
-
});
-
}
-
}, 1000) // 每秒检查一次
-
-
}
-
}
二.第二种方法(推荐)
上面那种,如果用户自动退出登录,那么定时循环任务还是会进行,推荐使用第二种
1.还在在登录后存当前时间戳
-
// 只能存在login,不然刷新页面会重新计算
-
this.$utils.cookies.set("loginTime",Date.now())
2.在路由导航守卫拦截
-
import { Message } from 'element-ui'
-
//定义失效时间,5小时
-
let overTime = 5 * 60 * 60 * 1000
-
router.beforeEach(async (to, from, next) => {
-
// 验证当前路由所有的匹配中是否需要有登录验证的
-
// 这里暂时将cookie里是否存有token作为验证是否登录的条件
-
const loginTime = util.cookies.get('loginTime');
-
const token = util.cookies.get('token')
-
if (token && token !== 'undefined' && loginTime) {
-
// 携带上登陆成功之后需要跳转的页面完整路径
-
let date = new Date().getTime();
-
// 当前时间 - 登录时间 > 设置的过期时间,为过期;则清除token,并强制跳转至登录页
-
// 反之为有效期,则放行
-
if (date - loginTime > overTime) {
-
util.cookies.remove("loginTime")
-
util.cookies.remove("token")
-
// 显示提示
-
Message({
-
message: "登录已失效,请重新登录",
-
type: 'error',
-
duration: 5 * 1000
-
})
-
next({
-
name: 'login',
-
query: {
-
redirect: to.fullPath
-
}
-
})
-
} else {
-
next();
-
}
-
-
} else {
-
next({
-
name: 'login',
-
query: {
-
redirect: to.fullPath
-
}
-
})
-
}
-
})
这样就实现了在页面调转的时候会提示用户登录时效并且直接跳转到登录页,如果用户退出登录也不会一直计算
本文章到此结束,希望对你有所帮助~
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfafhf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01