Vue实现过期退出
Vue实现过期退出功能的方法
在Vue应用中实现过期退出功能通常涉及以下步骤：
设置登录状态和过期时间
在用户登录成功后，将token和过期时间存储在本地存储或Vuex中：
localStorage.setItem('token', response.data.token)
localStorage.setItem('expiresAt', Date.now() + response.data.expiresIn * 1000)创建定时检查函数
在Vue的全局混入或根组件中，创建一个定时检查函数：
methods: {
checkAuthTimeout() {
const expiresAt = localStorage.getItem('expiresAt')
if (expiresAt && Date.now() > parseInt(expiresAt)) {
this.logout()
}
}
}使用路由守卫进行全局验证
在Vue Router中设置全局前置守卫：
router.beforeEach((to, from, next) => {
const expiresAt = localStorage.getItem('expiresAt')
if (to.meta.requiresAuth && (!expiresAt || Date.now() > parseInt(expiresAt))) {
next('/login')
} else {
next()
}
})实现自动登出功能
设置定时器定期检查认证状态：
mounted() {
this.timer = setInterval(() => {
this.checkAuthTimeout()
}, 60000) // 每分钟检查一次
},
beforeDestroy() {
clearInterval(this.timer)
}处理用户登出
创建登出方法清除用户数据：
methods: {
logout() {
localStorage.removeItem('token')
localStorage.removeItem('expiresAt')
this.$router.push('/login')
}
}使用第三方库增强安全性
考虑使用js-cookie等库更安全地处理token：
import Cookies from 'js-cookie'
Cookies.set('token', response.data.token, {
expires: response.data.expiresIn / 86400
})这些方法组合使用可以有效地实现Vue应用中的过期退出功能，确保用户会话安全。根据具体需求，可以调整检查频率和存储方式。
