用戶(hù)在使用Web應(yīng)用程序時(shí)，需要進(jìn)行登錄以獲取安全訪問(wèn)權(quán)限。然而，有些用戶(hù)會(huì)在登錄之后長(zhǎng)時(shí)間離開(kāi)瀏覽器，導(dǎo)致應(yīng)用程序中的會(huì)話失效。當(dāng)用戶(hù)回到瀏覽器時(shí)，應(yīng)用程序會(huì)要求其重新登錄，這給用戶(hù)帶來(lái)了不便。Vue提供了一種解決方案，使開(kāi)發(fā)人員能夠設(shè)置登錄過(guò)期時(shí)間，當(dāng)用戶(hù)離開(kāi)瀏覽器一段時(shí)間后，將自動(dòng)注銷(xiāo)用戶(hù)的會(huì)話。

Vue通過(guò)使用路由導(dǎo)航守衛(wèi)的beforeEach()鉤子來(lái)檢查用戶(hù)是否登錄和登錄是否過(guò)期。如果用戶(hù)已登錄并且未過(guò)期，則繼續(xù)導(dǎo)航到目標(biāo)路由。如果用戶(hù)未登錄或者登錄過(guò)期，則重定向到登錄頁(yè)面。

router.beforeEach((to, from, next) =>{
const currentUser = firebase.auth().currentUser;
const requiresAuth = to.matched.some(record =>record.meta.requiresAuth);
const currentTime = Date.now();
const expirationTime = localStorage.getItem('expirationTime');
if (requiresAuth && !currentUser) {
next('/login');
} else if (requiresAuth && currentUser && currentTime >= expirationTime) {
firebase.auth().signOut();
next('/login');
} else {
next();
}
});

要設(shè)置過(guò)期時(shí)間，可以使用localStorage將其存儲(chǔ)在瀏覽器中，并在路由導(dǎo)航守衛(wèi)中檢查該時(shí)間與當(dāng)前時(shí)間的差異。以下代碼演示了如何設(shè)置過(guò)期時(shí)間：

firebase.auth().signInWithEmailAndPassword(email, password)
.then(response =>{
const expirationTime = Date.now() + (response.user.expiresIn * 1000);
localStorage.setItem('expirationTime', expirationTime);
router.push('/');
})
.catch(error =>{
console.log(error.message);
});

在上面的代碼中，我們?cè)谟脩?hù)登錄成功后獲取過(guò)期時(shí)間。它將當(dāng)前時(shí)間與過(guò)期時(shí)間相加，并將結(jié)果存儲(chǔ)在localStorage中。然后，我們將用戶(hù)重定向到應(yīng)用程序的主頁(yè)。

在維護(hù)Web應(yīng)用程序的安全性方面，登錄過(guò)期時(shí)間非常重要。Vue提供了一個(gè)簡(jiǎn)單而有效的解決方案，可以幫助我們確保用戶(hù)的會(huì)話不會(huì)由于長(zhǎng)時(shí)間未活動(dòng)而失效。