在現(xiàn)代前端開發(fā)中,我們常常需要做一個長期停留在某頁面不操作而跳轉(zhuǎn)至登錄頁面的效果。這個看似簡單的需求,背后卻關(guān)聯(lián)著用戶體驗、數(shù)據(jù)分析和系統(tǒng)性能等多個重要方面,如下是從vue項目中摘出邏輯代碼供大家參考。
config中
* @description 導(dǎo)出通用配置 */module.exports = { keepStorageTime: 24, }
1,登錄的時候會調(diào)用該setUserInfor方法,也更新保存時間localStorage keepStorageTime(現(xiàn)在的時間加上24小時)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 存儲用戶信息,登錄的時候會調(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)頁后時,更新保存時間 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錯誤攔截:', 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:
退出的時候調(diào)用重置的時候清除keepStorageTime和用戶信息及token async resetAll({ commit, dispatch }) { removeUserInfor() localStorage.removeItem('keepStorageTime') },
閱讀原文:https://mp.weixin.qq.com/s/TiuElk4Q9FgxL9pAV2T02g
該文章在 2025/7/3 23:46:09 編輯過