用戶在使用Web應用程序時，需要進行登錄以獲取安全訪問權限。然而，有些用戶會在登錄之后長時間離開瀏覽器，導致應用程序中的會話失效。當用戶回到瀏覽器時，應用程序會要求其重新登錄，這給用戶帶來了不便。Vue提供了一種解決方案，使開發人員能夠設置登錄過期時間，當用戶離開瀏覽器一段時間后，將自動注銷用戶的會話。

Vue通過使用路由導航守衛的beforeEach()鉤子來檢查用戶是否登錄和登錄是否過期。如果用戶已登錄并且未過期，則繼續導航到目標路由。如果用戶未登錄或者登錄過期，則重定向到登錄頁面。

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();
}
});

要設置過期時間，可以使用localStorage將其存儲在瀏覽器中，并在路由導航守衛中檢查該時間與當前時間的差異。以下代碼演示了如何設置過期時間：

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);
});

在上面的代碼中，我們在用戶登錄成功后獲取過期時間。它將當前時間與過期時間相加，并將結果存儲在localStorage中。然后，我們將用戶重定向到應用程序的主頁。

在維護Web應用程序的安全性方面，登錄過期時間非常重要。Vue提供了一個簡單而有效的解決方案，可以幫助我們確保用戶的會話不會由于長時間未活動而失效。