Vue设置长时间未操作登录自动到期返回登录页
Vue设置长时间未操作登录以后自动到期返回登录页
首先我们写在main.js文件中
importrouterUtilfrom"@/utils/routerutil";//先将js文件在main.js中引入 routerUtil(router);
我们会在登陆成功后调用sessionUtil文件中的setSession，sessionUtil下面写的有
importsessionUtilfrom'@/utils/sessionutil'
sessionUtil.setSession("userInfo",'2');
在routerutil.js文件中
importsessionUtilfrom"./sessionutil";
constwhiteList=["/",'/logins'];//路由白名单，不需要校验
exportdefaultrouter=>{
router.beforeEach(async(to,from,next)=>{/*在跳转之前执行*/
constuserInfo=sessionUtil.getSession("userInfo");//触发sessionUtil中的getSession方法
if(userInfo){
////
}else{
if(whiteList.indexOf(to.path)!==-1){
next();
}else{
Message({
type:"warning",
message:"用户登录过期，请重新登录",
duration:1500,
onClose(){
next(`/`);
}
});
}
}
});
};
在sessionutil.js文件中
constsessionutil={
setSession(key,value,maxAge){//key=userInfovalue=2maxAge=''||可自行设置
constmaxAgeTime=newDate().getTime()+1000*3600;//当前时间的+1小时session过期时间
try{
letdata={value,maxAge:maxAge?maxAge:maxAgeTime}
sessionStorage.setItem(typeofkey==='string'?key:JSON.stringify(key),JSON.stringify(data))
}catch(err){
}
},
getSession(key){
try{
constmaxAgeTime=newDate().getTime()+1000*3600;//首先先设置一个session过期时间1H后可自行设置
letdate=newDate().getTime();//当前时间
letsession=JSON.parse(sessionStorage.getItem(typeofkey==='string'?key:JSON.stringify(key)));
if(session&&session.maxAge!=null&&session.maxAge-date>0&&session.maxAge<=maxAgeTime){
this.setSession(key,session.value);
returnsession.value;
}else{
returnnull;
}
}catch(err){
}
},
}
exportdefaultsessionutil;
总结
以上所述是小编给大家介绍的Vue设置长时间未操作登录自动到期返回登录页，希望对大家有所帮助！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。