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 相关文章推荐
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
JS闭包经典实例详解
Dec 20 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
node.js命令行教程图文详解
May 27 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
原生js实现弹窗消息动画
Nov 20 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
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
详解C++编程中一元运算符的重载
2016/01/19 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
Python shutil模块用法实例分析
2019/10/02 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
日语专业毕业生自荐信
2013/11/11 职场文书
体育教师自荐信范文
2013/12/16 职场文书
校园标语大全
2014/06/19 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
开学典礼校长致辞
2015/07/29 职场文书