狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

【W(wǎng)EB開發(fā)】如何做用戶超過24小時沒有操作頁面而跳轉至登錄?

admin
2025年7月3日 7:47 本文熱度 176

在現(xiàn)代前端開發(fā)中,我們常常需要做一個長期停留在某頁面不操作跳轉至登錄頁面的效果。這個看似簡單的需求,背后卻關聯(lián)著用戶體驗、數(shù)據(jù)分析和系統(tǒng)性能等多個重要方面,如下是從vue項目中摘出邏輯代碼供大家參考。

config中

/** * @description 導出通用配置 */module.exports = {  keepStorageTime: 24  //存儲storage時間長度(目前只控制localStorage存儲用戶信息的時長,單位為小時)  }
userInfor.js
1,登錄的時候會調(diào)用該setUserInfor方法,也更新保存時間localStorage keepStorageTime(現(xiàn)在的時間加上24小時)
2,每次進內(nèi)頁調(diào)方法getUserInfor,如果Date.now()<緩存的keepStorageTime,便清除用戶信息(沒有用戶信息就過不了路由守衛(wèi),而跳轉至登錄界面)
import {  keepStorageTime } from '@/config'// 設置保存時間為24小時,超過24小時沒有訪問過內(nèi)頁的話,重新進內(nèi)頁會因為沒有用戶信息跳轉至登錄let expires = Date.now() + 1000 * 60 * 60 * keepStorageTime/** * @description 存儲用戶信息,登錄的時候會調(diào)用該方法 * @param token * @returns {void|*} */export function setUserInfor(userInfor) {        //存儲用戶信息的時候存儲keepStorageTime時間( 緩存保存時間)      localStorage.setItem('keepStorageTime'JSON.stringify(expires))      return localStorage.setItem(userInforTableName, userInfor)}/** * @description 獲取用戶信息,進內(nèi)頁都會調(diào)用 * @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,路由守衛(wèi)中,進到內(nèi)頁后時,更新保存時間 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小時沒有訪問過內(nèi)頁的話,重新進內(nèi)頁會因為沒有用戶信息跳轉至登錄        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(關閉登錄攔截時)時,創(chuàng)建虛擬角色        else await store.dispatch('user/setVirtualRoles')        // 根據(jù)路由模式獲取路由并根據(jù)權限過濾        await store.dispatch('routes/setRoutes', authentication)        next({ ...to, replacetrue })      } 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, replacetrue })      } else next()    } else next(toLoginRoute(to.path))  }})

user/resetAll:

退出的時候調(diào)用重置的時候清除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是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運作、調(diào)度、堆場、車隊、財務費用、相關報表等業(yè)務管理,結合碼頭的業(yè)務特點,圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved