當我們在使用 Vue 開發單頁應用時，用戶的登錄狀態是非常重要的一個問題。在業務處理中，我們需要在前端做到以下兩點：

首先，應該盡可能地避免請求后端 API 時重復登錄用戶的問題。

axios.defaults.headers.common['Authorization'] = window.localStorage.getItem('token') || ''

我們可以使用 axios 添加請求頭，在每次請求時，向后端發送登錄過的 token，從而保證用戶的登錄狀態是一直都有效的。

其次，因為前端應用的本質是在用戶的瀏覽器中運行的，所以前端也需要對用戶登錄狀態進行檢查，而且這種檢查是經常需要的。

router.beforeEach((to, from, next) =>{
const { token } = store.state.user
const isLogin = !!token
if (to.meta.auth && !isLogin && to.name !== 'Login') {
next({ name: 'Login' })
} else {
next()
}
})

我們可以使用 Vue Router 去監聽每次路由跳轉的過程，并判斷當前是否需要用戶登錄狀態進行檢查。在這個代碼片段中，我們可以看到 to.meta.auth 表示當前路由需要進行權限驗證，如果用戶未登錄則會跳轉到登錄頁面。

除此之外，我們還需要對 token 進行存儲和更新。一般而言，我們可以通過使用 localStorage 來存儲當前用戶的 token，以此來保持用戶登錄狀態的有效性。

window.localStorage.setItem('token', token)

當 token 更新時，我們同樣需要對其進行存儲操作。

window.localStorage.setItem('token', newToken)

在以上的這些操作中，我們使用到了 Vue Router、Vuex 和 axios 三個工具，這些工具對于管理用戶登錄狀態以及實現一些常規的業務流程非常有幫助。