在線系統是現代企業不可或缺的一部分，而系統安全性又是保障企業利益的關鍵。為了增加系統的安全性，我們通常會在登錄模塊加入登錄時間檢驗的功能，以確保用戶登錄時的合法性。本文將講解如何用Vue實現登錄時間檢驗功能。

首先，在用戶登錄時服務器返回用戶信息的同時需要返回一個過期時間，將過期時間存儲在localStorage中：

login() {
axios.post('url', data)
.then(res =>{
const userInfo = res.data.userInfo
const expiredTime = new Date().getTime() + 1000 * 60 * res.data.timeout
localStorage.setItem('userInfo', JSON.stringify(userInfo))
localStorage.setItem('expiredTime', expiredTime)
})
.catch(err =>{
console.log(err)
})
}

接下來，我們需要在Vue的路由守衛中添加過期時間的判斷，當用戶在沒有注銷的情況下過期時間到期后再訪問系統時會被強制退出登錄，并跳轉到登錄頁面：

router.beforeEach((to, from, next) =>{
const userInfo = localStorage.getItem('userInfo')
const expiredTime = localStorage.getItem('expiredTime')
if (userInfo && parseInt(expiredTime) >new Date().getTime()) {
next()
} else {
localStorage.removeItem('userInfo')
localStorage.removeItem('expiredTime')
next('/login')
}
})

在Vue的路由守衛中，我們通過localStorage中存儲的過期時間和當前時間進行比較，如果過期時間大于當前時間，則跳轉到下一個路由。否則，將用戶信息和過期時間從localStorage中移除，并跳轉到登錄頁面。

為了讓用戶在系統使用期限內不需要頻繁登錄，我們可以在每次用戶操作時對過期時間進行更新：

mounted() {
this.timer = setInterval(() =>{
const userInfo = localStorage.getItem('userInfo')
const expiredTime = localStorage.getItem('expiredTime')
if (userInfo && parseInt(expiredTime) >new Date().getTime()) {
const newExpiredTime = new Date().getTime() + 1000 * 60 * 30 //30 minutes
localStorage.setItem('expiredTime', newExpiredTime)
}
}, 1000 * 60 * 5) //5 minutes
},
beforeDestroy() {
clearInterval(this.timer)
}

在Vue實例的mounted鉤子函數中，我們設置了一個定時器，每5分鐘檢查一次過期時間是否過期。如果沒有過期，則更新過期時間。在Vue實例的beforeDestroy鉤子函數中，我們清除了定時器。

通過以上步驟，我們就可以很容易地實現基于Vue的登錄時間檢驗功能，增強了系統的安全性，提升了用戶體驗。