在現(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 編輯過