亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

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

【W(wǎng)EB開(kāi)發(fā)】如何做用戶超過(guò)24小時(shí)沒(méi)有操作頁(yè)面而跳轉(zhuǎn)至登錄?

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

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

config中

/** * @description 導(dǎo)出通用配置 */module.exports = {  keepStorageTime: 24  //存儲(chǔ)storage時(shí)間長(zhǎng)度(目前只控制localStorage存儲(chǔ)用戶信息的時(shí)長(zhǎng),單位為小時(shí))  }
userInfor.js
1,登錄的時(shí)候會(huì)調(diào)用該setUserInfor方法,也更新保存時(shí)間localStorage keepStorageTime(現(xiàn)在的時(shí)間加上24小時(shí))
2,每次進(jìn)內(nèi)頁(yè)調(diào)方法getUserInfor,如果Date.now()<緩存的keepStorageTime,便清除用戶信息(沒(méi)有用戶信息就過(guò)不了路由守衛(wèi),而跳轉(zhuǎn)至登錄界面)
import {  keepStorageTime } from '@/config'// 設(shè)置保存時(shí)間為24小時(shí),超過(guò)24小時(shí)沒(méi)有訪問(wèn)過(guò)內(nèi)頁(yè)的話,重新進(jìn)內(nèi)頁(yè)會(huì)因?yàn)闆](méi)有用戶信息跳轉(zhuǎn)至登錄let expires = Date.now() + 1000 * 60 * 60 * keepStorageTime/** * @description 存儲(chǔ)用戶信息,登錄的時(shí)候會(huì)調(diào)用該方法 * @param token * @returns {void|*} */export function setUserInfor(userInfor) {        //存儲(chǔ)用戶信息的時(shí)候存儲(chǔ)keepStorageTime時(shí)間( 緩存保存時(shí)間)      localStorage.setItem('keepStorageTime'JSON.stringify(expires))      return localStorage.setItem(userInforTableName, userInfor)}/** * @description 獲取用戶信息,進(jìn)內(nèi)頁(yè)都會(huì)調(diào)用 * @returns {string|ActiveX.IXMLDOMNode|Promise<any>|any|IDBRequest<any>|MediaKeyStatus|FormDataEntryValue|Function|Promise<Credential | null>} */export function getUserInfor() {      //當(dāng)前時(shí)間大于 expires時(shí)間( 緩存保存時(shí)間)清除用戶信息    let item = JSON.parse(localStorage.getItem('keepStorageTime'))    if (item) {      if (item < Date.now()) {        removeUserInfor()      }    }    if ('localStorage' === storage) {      return localStorage.getItem(userInforTableName)    }  }
3,路由守衛(wèi)中,進(jìn)到內(nèi)頁(yè)后時(shí),更新保存時(shí)間 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) {      // 禁止已登錄用戶返回登錄頁(yè)      if (to.path === '/login') {        next({ path'/' })        if (showProgressBar) VabProgress.done()      } else {        //存儲(chǔ)用戶信息的時(shí)候存儲(chǔ)expires時(shí)間( 緩存保存時(shí)間)        // 更新保存時(shí)間expires,超過(guò)24小時(shí)沒(méi)有訪問(wèn)過(guò)內(nèi)頁(yè)的話,重新進(jìn)內(nèi)頁(yè)會(huì)因?yàn)闆](méi)有用戶信息跳轉(zhuǎn)至登錄        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(關(guān)閉登錄攔截時(shí))時(shí),創(chuàng)建虛擬角色        else await store.dispatch('user/setVirtualRoles')        // 根據(jù)路由模式獲取路由并根據(jù)權(quán)限過(guò)濾        await store.dispatch('routes/setRoutes', authentication)        next({ ...to, replacetrue })      } catch (err) {        console.error('vue-admin-beautiful錯(cuò)誤攔截:', err)        await store.dispatch('user/resetAll')        next(toLoginRoute(to.path))      }    }  } else {    if (routesWhiteList.includes(to.path)) {      // 設(shè)置游客路由(不需要可以刪除)      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:

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