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

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设置长时间未操作登录自动到期返回登录页，希望对大家有所帮助！

赞 (0)

相关推荐

  • vue-router判断页面未登录自动跳转到登录页的方法示例

    1.定义路由的时候配置meta属性,requireAuth用来标记跳转的这个路由是否需要检测登录 下面的两个页面,登录页不需要检测,首页需要检测 const routers = [ { path: '/', component: App, children: [ { path: '/login', component: Login, meta: { title: '登录' } }, { path: '/home', component: Home, meta: { title: '首页', re

  • Vue-router路由判断页面未登录跳转到登录页面的实例

    如下所示: router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (token) { // 判断当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该

  • vue实现未登录跳转到登录页面的方法

    环境:vue 2.9.3; webpack;vue-router 目的:实现未登录跳转 例子:直接在url地址栏输入...../home,但是这个页面要求需要登陆之后才能进入,判断的值就通过登陆之后给本地缓存存入的token判断,如果没有就跳转到登录页面,有的话就打开. 图示: 1.直接在url地址栏输入http://127.0.0.1:9000/#/home,但是页面会直接跳转到登录页,而且会带上参数. --------------------------------------------分

  • vuex实现登录状态的存储,未登录状态不允许浏览的方法

    基础思路就是使用vuex状态管理来存储登录状态(其实就是存一个值,例如token),然后在路由跳转前进行登录状态的判断,可以使用vue-router的全局前置守卫beforeEach,也可以使用路由独享的守卫beforeEnter. 导航守卫 正如其名,vue-router``` 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察 $route 对象来应对

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

    Vue设置长时间未操作登录以后自动到期返回登录页 首先我们写在main.js文件中 import routerUtil from "@/utils/routerutil";//先将js文件在main.js中引入 routerUtil(router); 我们会在登陆成功后调用sessionUtil文件中的setSession,sessionUtil下面写的有 import sessionUtil from '@/utils/sessionutil' sessionUtil.setSess

  • vue中js判断长时间不操作界面自动退出登录(推荐)

    需求说明,后台有做半个小时不请求接口的话返回标识退出登录,但是要请求接口才行,现在要实现前端用js判断半个小时不操作界面的话自动跳转到登录页面. 创建一个.js文件,在main.js引入此js(vue框架) 在登录成功的时候保存当前时间localStorage.setItem("lastTime",new Date().getTime()); 然后在点击的时候更新这个时间 var lastTime = new Date().getTime(); var currentTime = ne

  • Java后端长时间无操作自动退出的实现方式

    目录 Java后端长时间无操作自动退出 使用session(最优) 使用拦截器 对于登陆长时间未操作超时退出问题 首先设置一个拦截器 然后进行配置文件 页面以及调用 页面 Java后端长时间无操作自动退出 使用session(最优) 设置session的过期时间,长时间(例如30分钟)无请求就会自动清除,达到长时间无操作自动退出的目的 server: port: 9201 session: timeout: 1800 使用拦截器 实现思路:每次请求后台时,在拦截器中刷新session,设置ses

  • vue用户长时间不操作退出到登录页的两种实现方式

    vue用户长时间不操作退出到登录页的两种实现方式

    目录 问题描述 前端控制(方式一) 思路 代码 后端控制(方式二) 思路 代码 总结 问题描述 产品说,出于安全考虑,用户长时间不操作,就回到登录页面,让用户重新登录,就像银行的app一样.本文就记录一下实现这种效果的两种方式,分别是前端控制和后端控制,各有细节及适用使用场景 前端控制(方式一) 思路 首先,用户长时间不操作具体表现形式是啥?其实就是事件是否长时间没有被触发执行. 比如用户长时间不操作,就没有鼠标点击(click)事件.鼠标滚轮(mousewheel)事件.鼠标移动(mousem

  • vue设置默认首页的操作

    在router.js设置如下: index就是默认页面 const routes = [ // 公司项目 { path: '/', redirect: '/index' }, {path:'/index',component:index}, { path:'/example', component:example, redirect:'/edetail', children:[ {path:'/edetail',component:edetail} ] }, {path:'/login',com

  • nodejs发送http请求时遇到404长时间未响应的解决方法

    通常,我们在使用nodejs发送http请求时,一旦遇到404响应,nodejs内部会一直请求下去,直到超出它自己设定的响应时长(最让人恶心的地方就是这个时长还是没法修改的.)很多人在这里碰到了麻烦. 我是在做arcgis地图项目的时候,客户提出需要使用天地图提供的底图服务,当时我直接使用silverlight客户端的Arcgis API进行http请求(同样是内部请求,不开源的东西就是这么让人郁闷),同样碰到了一个进度条一直卡在那的问题.经过调试发现,是由于底图加载请求超时的缘故,和nodej

  • vue实现用户长时间不操作自动退出登录功能的实现代码

    一.需求说明 昨天后端开发人员让我实现一个网页锁屏,当时我一头雾水,问他为啥搞的跟安卓系统一样.他的回复是"看起来帅点". 首先我们梳理下逻辑,先来个简化版的,用户长时间未操作时,返回登录页 二.思路 使用 mouseover 事件来监测是否有用户操作页面,写一个定时器间隔特定时间检测是否长时间未操作页面,如果是,退出登陆,清除token,返回登录页 三.实现 [1]在util文件夹下创建一个storage.js封装localStorage方法 export default { set

  • PHP利用Cookie设置用户30分钟未操作自动退出功能

    登陆控制器需要做的登陆成功把用户ID等信息存入cookie: $this->systemSetKey(array('name'=>$admin_info['admin_name'], 'id'=>$admin_info['admin_id'],'gid'=>$admin_info['admin_gid'],'sp'=>$admin_info['admin_is_super']));//登陆成功之后做得事情 父类中的 systemSetKey 方法: /** * 系统后台 会员

  • springboot vue测试平台开发调通前后端环境实现登录

    springboot vue测试平台开发调通前后端环境实现登录

    目录 基于 springboot+vue的测试平台开发 一.前端环境搭建 快速安装 二.后端环境搭建 创建应用 配置 application.properties 三.实现登录 1. mysql 建表 2. 后端-实现 /login 接口 3. 前端-修改代码实现登录 4. 解决跨域 5. 后端-实现 /useInfo 接口 6. 后端-实现 /logout 接口 四.小结 基于 springboot+vue的测试平台开发 一.前端环境搭建 在前端框架vue-element-admin这个项目中

  • JSP开发中在spring mvc项目中实现登录账号单浏览器登录

    JSP开发中在spring mvc项目中实现登录账号单浏览器登录 在很多web产品中都需要实现在同一时刻,只能允许一个账号同时只能在一个浏览器当中登录.通俗点讲就是当A账号在 浏览器1当中登录了,此时在浏览器2中登录A账号.那么在浏览器1中的A账号将会被挤出去,当用户操作浏览器1的页面,页面会 跳到登录页面,需要重新登录.那么我们怎么实现这样的功能呢?下面将给大家进行详细的介绍: 原理 用户A使用账号a在浏览器当中登录,然后用户B在另外一台电脑上的浏览器登录账号a,当用户B登录验证成功时,将会触

随机推荐