在Web應用開發中，經常需要用戶登錄并驗證身份才能訪問某些數據或頁面。Vue框架提供了方便的方式來實現登錄和存儲用戶登錄信息。在這篇文章中，我們將探討Vue的登錄信息保存以及如何在應用中使用這些信息。

實現登錄功能的第一步是將用戶輸入的用戶名和密碼發送到后端進行驗證。如果驗證成功，后端會發送一個包含用戶信息的JSON Web Token（JWT）給前端。這個JWT包含了用戶的ID以及其他有關用戶身份的信息。

const params = {
username: this.username,
password: this.password
}
axios.post('http://localhost:3000/login', params)
.then(response =>{
const token = response.data.token
localStorage.setItem('token', token)
this.$router.push('/dashboard')
})
.catch(error =>{
console.log(error)
})

要保存JWT，我們可以使用瀏覽器的localStorage API。localStorage是瀏覽器提供的一種用于本地存儲數據的機制，可以將數據存儲在用戶的瀏覽器中。可以使用setItem方法存儲數據，使用getItem方法檢索數據：

localStorage.setItem('token', token)
const token = localStorage.getItem('token')

在用戶成功登錄后，我們可以將用戶信息存儲在Vuex狀態管理系統中。

const state = {
userInfo: {}
}
const mutations = {
setUserInfo(state, payload) {
state.userInfo = payload
}
}
const actions = {
getUserInfo(context) {
const token = localStorage.getItem('token')
if (token) {
const payload = JSON.parse(atob(token.split('.')[1]))
context.commit('setUserInfo', payload)
}
}
}

當用戶登錄成功后，我們使用JWT中的payload屬性設置Vuex中的用戶信息。在本例中，我們使用了atob函數對JWT進行解碼，然后將結果轉換為JSON格式。Vuex可以使用commit函數對mutation進行調用，將用戶信息存儲在狀態管理器中。

現在，我們已經將用戶身份信息存儲在localStorage和Vuex狀態管理系統中。如何使用這些信息呢？

我們可以在Vue組件內使用Vuex的computed屬性獲取用戶信息，然后使用這些信息來設置頁面內容或者控制組件的渲染。

computed: {
userInfo() {
return this.$store.state.userInfo
}
}

使用這些信息，我們可以針對用戶執行特定的操作，如隱藏某些部件或者禁用某些按鈕。這就是Vue的登錄信息保存機制。它使開發人員可以輕松地創建安全的Web應用程序，并對用戶信息進行靈活和實時的控制。