Vue设置长时间未操作登录自动到期返回登录页


Posted in Javascript onJanuary 22, 2020

Vue设置长时间未操作登录以后自动到期返回登录页

首先我们写在main.js文件中

import routerUtil from "@/utils/routerutil";//先将js文件在main.js中引入
routerUtil(router);

我们会在登陆成功后调用sessionUtil文件中的setSession,sessionUtil下面写的有

import sessionUtil from '@/utils/sessionutil'
sessionUtil.setSession("userInfo", '2');

在routerutil.js文件中

import sessionUtil from "./sessionutil";
const whiteList = ["/",'/logins']; // 路由白名单,不需要校验

export default router => {
 router.beforeEach(async (to, from, next) => {/*在跳转之前执行*/
 const userInfo = 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文件中

const sessionutil = {
 setSession(key,value,maxAge){ //key=userInfo value=2 maxAge='' || 可自行设置
 const maxAgeTime = new Date().getTime() + 1000 * 3600; // 当前时间的+1小时 session 过期时间
 try{
  let data = { value, maxAge: maxAge ? maxAge : maxAgeTime }
  sessionStorage.setItem(typeof key === 'string'?key: JSON.stringify(key),JSON.stringify(data))
 }catch(err){
 }
 },
 getSession(key){
 try{
  const maxAgeTime = new Date().getTime() + 1000 * 3600; // 首先先设置一个 session 过期时间 1H后可自行设置
  let date = new Date().getTime(); //当前时间
  let session = JSON.parse(sessionStorage.getItem(typeof key === 'string'?key: JSON.stringify(key))); 
  if(session && session.maxAge != null && session.maxAge-date > 0 && session.maxAge <= maxAgeTime ){
  this.setSession(key,session.value);
  return session.value;
  } else {
  return null;
  }
 }catch(err){
 }
 },
}
export default sessionutil;

总结

以上所述是小编给大家介绍的Vue设置长时间未操作登录自动到期返回登录页,希望对大家有所帮助!

Javascript 相关文章推荐
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
Javascript中的delete操作符详细介绍
Jun 06 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
javascript iframe跨域详解
Oct 26 Javascript
canvas绘制环形进度条
Feb 23 Javascript
js前端导出Excel的方法
Nov 01 Javascript
详解webpack 入门与解析
Apr 09 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 #Javascript
Vue开发环境跨域访问问题
Jan 22 #Javascript
vue中英文切换实例代码
Jan 21 #Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 #Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 #Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 #Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 #Javascript
You might like
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
php分页函数完整实例代码
2014/09/22 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
JavaScript toFixed() 方法
2010/04/15 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
详细介绍Python中的偏函数
2015/04/27 Python
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
python不同系统中打开方法
2020/06/23 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
毕业典礼演讲稿
2014/05/13 职场文书
敬老模范事迹
2014/05/21 职场文书
法院授权委托书格式
2014/09/28 职场文书
关于安全的广播稿
2014/10/23 职场文书
2014年评职称工作总结
2014/11/20 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
雷锋的观后感
2015/06/10 职场文书
成事在人观后感
2015/06/16 职场文书
旷工检讨书大全
2015/08/15 职场文书
delete in子查询不走索引问题分析
2022/07/07 MySQL