当前位置：首页 > news >正文

vue路由路径加上自动退出登录

news 2025/11/12 8:52:52

vue路由路径加上自动退出登录，实现系统页面在一定时长内停留不操作后退出到登录页（即访问过时退出）。

具体实现逻辑文件autoLoginOut.js:

import store from '@/store'
import { debounce, isNil } from 'lodash'// 不会自动退出登录的路径白名单
const whiteList = ['bigScreen/screenmanagement', // 大屏管理中心'messagePlatform', // 对外的短信平台'warningSystem', // 流溪河灌区的预警系统'bigScreen', // 大屏相关'system', // 运维中心'login','norm/video','stationOverview','threeFloorAUX','waterDisastersScreen'
]
let timer = null
/*** @description: 判断路由路径是否需要加上自动退出登录。定时器间隔是1分钟，所以inactiveTime最小值为1分钟* @param {String} routerPath 该路径用于判断是否需要加上退出登录的定时器* @param {Object} vueRouter 传入vue-router实例用于跳转页面* @param {Number} inactiveTime 设置多长时间不活跃就退出系统，单位毫秒  默认1小时* @return {*}*/
const autoLoginOut = (routerPath, vueRouter, inactiveTime = 60 * 60 * 1000) => {if (isNil(vueRouter)) return console.error('The parameter "vueRouter" is missing.')if (typeof routerPath !== 'string') return console.error('The parameter "routerPath" must be String')if (whiteList.some(item => routerPath.indexOf(item) > -1)) {timer && clearInterval(timer)timer = nullreturn}if (timer) returntimer = setInterval(() => {if (new Date().getTime() - sessionStorage.getItem('lastActiveTime') > inactiveTime) {clearInterval(timer)timer = nullstore.dispatch('user/logout', {})//调用方法清除数据vueRouter.push('/login')//跳转到登录页}}, 60 * 1000)
}window.addEventListener('click', () => {sessionStorage.setItem('lastActiveTime', new Date().getTime())
}, true)
window.addEventListener('mousewheel', debounce(() => {sessionStorage.setItem('lastActiveTime', new Date().getTime())
}, 500), true)
window.addEventListener('mousemove', debounce(() => {sessionStorage.setItem('lastActiveTime', new Date().getTime())
}, 500), true)export default autoLoginOut