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 相关文章推荐
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 Javascript
JS实现炫酷轮播图
Nov 15 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
php读取javascript设置的cookies的代码
2010/04/12 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
PHP实现变色验证码实例
2014/01/06 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
浅谈Angular 观察者模式理解
2018/11/01 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
办理护照工作证明
2014/10/10 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
地心历险记观后感
2015/06/15 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers