【WEB开发】如何做用户超过24小时没有操作页面而跳转至登录？

admin

2025年7月3日 7:47 本文热度 232

在现代前端开发中，我们常常需要做一个长期停留在某页面不操作而跳转至登录页面的效果。这个看似简单的需求，背后却关联着用户体验、数据分析和系统性能等多个重要方面，如下是从vue项目中摘出逻辑代码供大家参考。

config中

/** * @description 导出通用配置 */module.exports = {  keepStorageTime: 24,   //存储storage时间长度（目前只控制localStorage存储用户信息的时长，单位为小时）  }

userInfor.js

1，登录的时候会调用该setUserInfor方法，也更新保存时间localStorage keepStorageTime(现在的时间加上24小时)

2，每次进内页前调方法getUserInfor，如果Date.now()<缓存的keepStorageTime，便清除用户信息（没有用户信息就过不了路由守卫，而跳转至登录界面）

import {  keepStorageTime } from '@/config'// 设置保存时间为24小时,超过24小时没有访问过内页的话，重新进内页会因为没有用户信息跳转至登录let expires = Date.now() + 1000 * 60 * 60 * keepStorageTime/** * @description 存储用户信息,登录的时候会调用该方法 * @param token * @returns {void|*} */export function setUserInfor(userInfor) {        //存储用户信息的时候存储keepStorageTime时间（ 缓存保存时间）      localStorage.setItem('keepStorageTime', JSON.stringify(expires))      return localStorage.setItem(userInforTableName, userInfor)}/** * @description 获取用户信息，进内页都会调用 * @returns {string|ActiveX.IXMLDOMNode|Promise<any>|any|IDBRequest<any>|MediaKeyStatus|FormDataEntryValue|Function|Promise<Credential | null>} */export function getUserInfor() {      //当前时间大于 expires时间（ 缓存保存时间）清除用户信息    let item = JSON.parse(localStorage.getItem('keepStorageTime'))    if (item) {      if (item < Date.now()) {        removeUserInfor()      }    }    if ('localStorage' === storage) {      return localStorage.getItem(userInforTableName)    }  }

3，路由守卫中，进到内页后时，更新保存时间 localStorage keepStorageTime

import {  keepStorageTime,} from '@/config'

router.beforeEach(async (to, from, next) => {  const { showProgressBar } = store.getters['settings/theme']  if (showProgressBar) VabProgress.start()  let hasToken = store.getters['user/token']  if (!loginInterception) hasToken = true  if (hasToken) {    if (store.getters['routes/routes'].length) {      // 禁止已登录用户返回登录页      if (to.path === '/login') {        next({ path: '/' })        if (showProgressBar) VabProgress.done()      } else {        //存储用户信息的时候存储expires时间（ 缓存保存时间）        // 更新保存时间expires,超过24小时没有访问过内页的话，重新进内页会因为没有用户信息跳转至登录        let expires = Date.now() + 1000 * 60 * 60 * keepStorageTime        localStorage.setItem('keepStorageTime', JSON.stringify(expires))        next()      }    } else {      try {        if (loginInterception) await store.dispatch('user/getUserInfo')        // config/setting.config.js loginInterception为false(关闭登录拦截时)时，创建虚拟角色        else await store.dispatch('user/setVirtualRoles')        // 根据路由模式获取路由并根据权限过滤        await store.dispatch('routes/setRoutes', authentication)        next({ ...to, replace: true })      } catch (err) {        console.error('vue-admin-beautiful错误拦截:', err)        await store.dispatch('user/resetAll')        next(toLoginRoute(to.path))      }    }  } else {    if (routesWhiteList.includes(to.path)) {      // 设置游客路由(不需要可以删除)      if (supportVisit && !store.getters['routes/routes'].length) {        await store.dispatch('routes/setRoutes', 'visit')        next({ ...to, replace: true })      } else next()    } else next(toLoginRoute(to.path))  }})

user/resetAll:

退出的时候调用重置的时候清除keepStorageTime和用户信息及token

  async resetAll({ commit, dispatch }) {    // console.log('resetAllresetAll')         removeUserInfor()    localStorage.removeItem('keepStorageTime')  },

阅读原文：https://mp.weixin.qq.com/s/TiuElk4Q9FgxL9pAV2T02g

该文章在 2025/7/3 23:46:09 编辑过

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。