后台管理系统如何保持登录状态
我们的需求是这样的:登录页有保持登录这一选项,保持登录就是除非登录时间超时,否则可以在任何页面打开;其实保持登录不用做,直接在用户关闭当前窗口的时候判断是否有保持登录这个状态,有的话不做处理,不保持登录就清除缓存 退出登录
首先监听关闭浏览器窗口事件
需要注意的是,window.onunload这个事件可以监听浏览器关闭,也能监听到浏览器刷新,所以我们根据他们触发的不同的时间来判断是关闭还是刷新(一般关闭时间比较短不会超过5毫秒)
在APP.vue全局监听
<script>
//在登录进去的时候保存keeplogin状态,在App.vue中做出判断是否是保持登录
//如果keeplogin==false 当前页面关闭的时候清除缓存
export default {
mounted () {
if(localStorage.getItem('keepLogin')== false){
let beginTime = 0;//开始时间
let differTime = 0;//时间差
window.onunload = function (){
differTime = new Date().getTime() - beginTime;
if(differTime <= 5) localStorage.clear();
};
window.onbeforeunload = function (){
beginTime = new Date().getTime();
};
}
}
}
</script>