【vue】vue实现用户长时间不操作，提示用户登录已过期重新登录

vue实现用户长时间不操作，提示用户登录已过期请重新登录

1.实现思路

使用 mouseover事件来监测是否有用户操作页面，然后写一个定时器间隔特定时间检测是否长时间未操作页面，如果是清除token，提示登录已过期请重新登录

2.实现代码
1.在util文件夹下创建一个storage.js封装localStorage方法

export default {setItem(key, value) {value = JSON.stringify(value);window.localStorage.setItem(key, value)},getItem(key, defaultValue) {let value = window.localStorage.getItem(key)try {value = JSON.parse(value);} catch {}return value || defaultValue},removeItem(key) {window.localStorage.removeItem(key)},clear() {window.localStorage.clear()},}

2.在util文件夹下创建一个testing.js

每隔10s去检查一下用户是否过了15分钟未操作页面
因为我这边是单点登录所以用户15分钟未操作就要跳转到单点登录系统，所以跳转这一块按实际情况来修改

import storage from '@/utils/storage'
// 导入cookie工具(这边需要自己按需求封装)
import {PcCookie,Key} from '@/utils/cookie'let lastTime = new Date().getTime()
let currentTime = new Date().getTime()
let timeOut = 15 * 60 * 1000  //设置超时时间: 15分钟window.onload = function () {window.document.onmousedown = function () {// 保存最新的操作时间到storage中storage.setItem("lastTime", new Date().getTime())}
};function checkTimeout() {//更新当前时间currentTime = new Date().getTime()      lastTime = storage.getItem("lastTime");//判断是否超时if (currentTime - lastTime > timeOut) { // 清除storage的数据(登陆信息和token)storage.clear()// 移除cookiePcCookie.remove(Key.accessTokenKey)PcCookie.remove(Key.userInfoKey)// 401 未认证或者访问令牌过期，未认证则要通过刷新令牌获取新的认证信息let isLock = true // 防止重复发送刷新请求if(isLock && PcCookie.get(Key.refreshTokenKey)) {isLock = false // 在发送后，将此值 设置为false// 跳转到认证中心客户端，实现刷新令牌效果window.location.href = `${process.env.VUE_APP_AUTH_CENTER_URL}/refresh?redirectURL=${window.location.href}`}else {//没有刷新令牌，则跳转到认证客户端进行重新认证window.location.href = `${process.env.VUE_APP_AUTH_CENTER_URL}?redirectURL=${window.location.href}`}}
}export default function () {/* 定时器 间隔10秒检测是否长时间未操作页面 */window.setInterval(checkTimeout, 10000);
}

3.在main.js引入testing.js

import Testing from '@/utils/testing'Vue.use(Testing )

3.实现效果

【vue】vue实现用户长时间不操作，提示用户登录已过期重新登录相关推荐

flexsession禁用_flex（替代session过期）用户长时间不操作要求重新登录的处理
在网上也看到一些方法,但效果不好.最近在见到了一个不错的方法.它利用了FlexEvent.IDLE空闲事件,然后用mx_internal::idleCounter来获取空闲时间.具体代码如下: 需要 ...
web 页面长时间未操作自动退出方法（自动退出登录）
web 页面自动超时自动退出方法思路: 使用 mouseover 事件来监测是否有用户操作页面,写一个定时器间隔特定时间检测是否长时间未操作页面,如果是,退出: 具体时间代码如下(js): var ...
页面长时间未操作，实现自动退出登录原理
项目场景: 页面长时间未操作的时候,会自动退出登录,并且提示你的登录已过期,需重新登录.那这个是怎么实现的呢? 两种方案第一种是完全由后端实现的,后台在servlet可以获取到session,可以设 ...
php登录后自动退出登录,PHP利用Cookie设置用户30分钟未操作自动退出功能
登陆控制器需要做的登陆成功把用户ID等信息存入cookie: $this->systemSetKey(array('name'=>$admin_info['admin_name'], 'i ...
vue 上次登录时间_vue实现登录之后长时间未操作，退出登录
效果如下: vue实现用户登录系统之后,长时间未操作,提示登录超时,直接退出登录,跳转至登录页面. app.vue: import {mapActions } from 'vuex'; import ...
ie浏览器查看vue中js_浅析 Vue.js 中那些空间换时间的操作
Hello,各位小伙伴,接下来的一段时间里,我会把我的课程<Vue.js 3.0 核心源码解析>中问题的答案陆续在我的公众号发布,由于课程的问题大多数都是开放性的问题,所以我的答案也不一定 ...
VUE实现长时间未操作退出登录
背景:在现在大多系统中,为了保障用户的安全,都会有固定时间未操作则自动退出登录的功能,这里根据我目前了解的内容大致实现一个简单的. 我的想法是这样,通过对定时器setTimeOut的使用,来进行倒计时 ...
vue 上次登录时间_Vue设置长时间未操作登录自动到期返回登录页
Vue设置长时间未操作登录以后自动到期返回登录页首先我们写在main.js文件中 import routerUtil from "@/utils/routerutil";//先将 ...
vue中长时间未操作就会强制退出
1. 创建一个公共js文件 import router from '../router' import store from '../store'var lastTime = new Date().g ...

【vue】vue实现用户长时间不操作，提示用户登录已过期重新登录

vue实现用户长时间不操作，提示用户登录已过期请重新登录

【vue】vue实现用户长时间不操作，提示用户登录已过期重新登录相关推荐

最新文章

热门文章