在Web應用程序中，登錄是一個常見的過程。在Vue應用程序中，實現身份驗證的一種方式是通過Vue Router和Vuex來進行路由保護和狀態管理。

首先，我們需要在Vuex存儲用戶信息，例如用戶名和密碼。當用戶填寫登錄表單并點擊“登錄”按鈕時，Vue組件將觸發一個Vuex操作，以便在Vuex存儲用戶憑據。

// 定義Vuex store
const store = new Vuex.Store({
state: {
currentUser: null
},
mutations: {
login (state, user) {
state.currentUser = user
},
logout (state) {
state.currentUser = null
}
},
actions: {
login ({ commit }, user) {
// 此處省略登錄驗證
commit('login', user)
},
logout ({ commit }) {
commit('logout')
}
}
})

接下來，我們需要改變Vue Router來進行路由保護。這可以通過導航鉤子來實現。我們可以使用“beforeEach”導航守衛來檢查用戶是否已經登錄。如果是，則允許用戶繼續訪問。否則，將用戶重定向到登錄頁面。

// 在Vue Router中設置導航守衛
const router = new VueRouter({
routes: [
{
path: '/login',
component: Login
},
{
path: '/',
component: Home,
meta: { requireAuth: true } // 設置需要驗證身份
}
]
})
router.beforeEach((to, from, next) =>{
if (to.matched.some(record =>record.meta.requireAuth)) {
if (!store.state.currentUser) {
next({ path: '/login' })
} else {
next()
}
} else {
next()
}
})

這樣，如果用戶嘗試訪問需要身份驗證的頁面，他們將被重定向到登錄頁面。一旦用戶成功登錄，他們將被重定向回原始請求的頁面。

最后，我們需要在登錄頁面的登錄表單提交函數中調用Vuex登錄操作。如果用戶輸入的憑據是有效的，我們將使用Vue Router的$router.push方法將用戶重定向回原始頁面。如果用戶輸入的憑據無效，則在登錄表單上顯示錯誤消息。

// 在登錄Vue組件中的登錄函數
methods: {
login () {
const user = { // 從表單中收集用戶信息
username: this.username,
password: this.password
}
store.dispatch('login', user) // 調用Vuex登錄操作
if (store.state.currentUser) { // 如果登錄成功
this.$router.push(this.$route.query.redirect || '/') // 重定向到原請求頁面
} else { // 如果登錄失敗
this.errorMessage = 'Invalid credentials'
}
}
}

Vue Router和Vuex使得在Vue應用程序中實現身份驗證和路由保護變得非常簡單。通過Vuex存儲用戶信息和檢查用戶是否登錄的方式，我們可以保護敏感的應用程序部分，只允許授權用戶訪問。如果您在創建Vue應用程序時需要身份驗證和授權，請考慮使用Vue Router和Vuex。