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

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

config中

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

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:

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