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 判断 enter 事件
Feb 12 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
原生js实现随机点名
Jul 05 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
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 zip文件解压类代码
2009/12/02 PHP
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
Thinkphp 框架配置操作之动态配置、扩展配置及批量配置实例分析
2020/05/15 PHP
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
Json解析的方法小结
2016/06/22 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
JavaScript实用代码小技巧
2018/08/23 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
javascript实现计算器功能
2020/03/30 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
Python3实现飞机大战游戏
2020/04/24 Python
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
有个性的自我评价范文
2013/11/15 职场文书
工地门卫岗位职责
2013/12/30 职场文书
小学生成长感言
2014/01/30 职场文书
装饰活动策划方案
2014/02/11 职场文书
银行自荐信范文
2015/03/25 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电