在現(xiàn)代前端開發(fā)中，我們常常需要做一個(gè)長期停留在某頁面不操作而跳轉(zhuǎn)至登錄頁面的效果。這個(gè)看似簡單的需求，背后卻關(guān)聯(lián)著用戶體驗(yàn)、數(shù)據(jù)分析和系統(tǒng)性能等多個(gè)重要方面，如下是從vue項(xiàng)目中摘出邏輯代碼供大家參考。
config中
* @description 導(dǎo)出通用配置 */module.exports = { keepStorageTime: 24, }
1，登錄的時(shí)候會調(diào)用該setUserInfor方法，也更新保存時(shí)間localStorage keepStorageTime(現(xiàn)在的時(shí)間加上24小時(shí))2，每次進(jìn)內(nèi)頁前調(diào)方法getUserInfor，如果Date.now()<緩存的keepStorageTime，便清除用戶信息（沒有用戶信息就過不了路由守衛(wèi)，而跳轉(zhuǎn)至登錄界面）import { keepStorageTime } from '@/config'let expires = Date.now() + 1000 * 60 * 60 * keepStorageTime * @description 存儲用戶信息,登錄的時(shí)候會調(diào)用該方法 * @param token * @returns {void|*} */export function setUserInfor(userInfor) { localStorage.setItem('keepStorageTime', JSON.stringify(expires)) return localStorage.setItem(userInforTableName, userInfor)} * @description 獲取用戶信息，進(jìn)內(nèi)頁都會調(diào)用 * @returns {string|ActiveX.IXMLDOMNode|Promise<any>|any|IDBRequest<any>|MediaKeyStatus|FormDataEntryValue|Function|Promise<Credential | null>} */export function getUserInfor() { 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)頁后時(shí)，更新保存時(shí)間 localStorage keepStorageTimeimport { 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 { let expires = Date.now() + 1000 * 60 * 60 * keepStorageTime localStorage.setItem('keepStorageTime', JSON.stringify(expires)) next() } } else { try { if (loginInterception) await store.dispatch('user/getUserInfo') else await store.dispatch('user/setVirtualRoles') await store.dispatch('routes/setRoutes', authentication) next({ ...to, replace: true }) } catch (err) { console.error('vue-admin-beautiful錯(cuò)誤攔截:', 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:
退出的時(shí)候調(diào)用重置的時(shí)候清除keepStorageTime和用戶信息及token async resetAll({ commit, dispatch }) { removeUserInfor() localStorage.removeItem('keepStorageTime') },
閱讀原文：https://mp.weixin.qq.com/s/TiuElk4Q9FgxL9pAV2T02g
該文章在 2025/7/3 23:46:09 編輯過
400 186 1886
