Vue.js 如何使用Vuex保持用户登录状态

在本文中，我们将介绍如何使用Vue.js和Vuex来保持用户的登录状态。保持用户登录状态是一个常见的需求，特别是在网站和应用程序中，我们希望在用户登录后能够记住他们的身份并保持他们的登录状态。

Vue.js是一个用于构建用户界面的JavaScript框架，它使用了组件化的开发方式。Vuex是Vue.js的状态管理模式，用于在Vue.js应用程序中进行集中式的状态管理。通过结合使用Vue.js和Vuex，我们可以更好地管理用户的登录状态。

阅读更多：Vue.js 教程

创建Vuex Store

首先，我们需要创建一个Vuex Store来管理我们的应用程序的状态。状态管理是Vuex的核心概念之一，它允许我们在应用程序中的不同组件之间共享和管理状态。

在这个例子中，我们需要一个状态来存储用户的登录状态。我们可以在Vuex Store中创建一个名为auth的模块，来处理与用户身份验证相关的逻辑。

// store/auth.js
const state = {
  isLoggedIn: false,
  user: null
}

const getters = {
  isLoggedIn: state => state.isLoggedIn,
  user: state => state.user
}

const actions = {
  login({ commit }, user) {
    // 处理用户登录逻辑
    commit('SET_USER', user)
    commit('SET_LOGGED_IN', true)
  },
  logout({ commit }) {
    // 处理用户登出逻辑
    commit('SET_USER', null)
    commit('SET_LOGGED_IN', false)
  }
}

const mutations = {
  SET_USER(state, user) {
    state.user = user
  },
  SET_LOGGED_IN(state, value) {
    state.isLoggedIn = value
  }
}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

在上面的代码中，我们定义了一个名为auth的Vuex模块，其中包含了用于处理用户登录和登出逻辑的actions和mutations。state用于存储用户的登录状态和用户信息，getters用于获取这些状态。export default语句用于导出auth模块，以便在应用程序中进行使用。

在Vue组件中使用Vuex Store

在应用程序的Vue组件中，我们可以使用Vuex Store来获取和更新用户的登录状态。

首先，我们需要在Vue组件中导入Vuex，并使用mapActions和mapGetters辅助函数来获取和调用Vuex Store的actions和getters。

// App.vue
<template>
  <div v-if="isLoggedIn">
    <!-- 用户已登录时显示的内容 -->
    <h2>Welcome, {{ user.name }}!</h2>
    <button @click="logout">Logout</button>
  </div>
  <div v-else>
    <!-- 用户未登录时显示的内容 -->
    <h2>Please log in</h2>
    <button @click="login">Login</button>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters('auth', ['isLoggedIn', 'user'])
  },
  methods: {
    ...mapActions('auth', ['login', 'logout'])
  }
}
</script>

在上面的代码中，我们使用mapGetters辅助函数将isLoggedIn和user从auth模块中映射到Vue组件的计算属性中。这样我们就可以使用{{ isLoggedIn }}和{{ user.name }}来获取登录状态和用户信息。

使用mapActions辅助函数将login和logout从auth模块映射到Vue组件的方法中。这样我们就可以在Vue组件中调用this.login()和this.logout()来处理用户登录和登出逻辑。

持久化用户登录状态

为了保持用户的登录状态，我们需要在用户登录时将登录状态存储在localStorage或cookie中，并在用户登出时清除该状态。

// store/auth.js
const actions = {
  login({ commit }, user) {
    // 处理用户登录逻辑
    // 存储登录状态
    localStorage.setItem('isLoggedIn', true)
    // 存储用户信息
    localStorage.setItem('user', JSON.stringify(user))

    commit('SET_USER', user)
    commit('SET_LOGGED_IN', true)
  },
  logout({ commit }) {
    // 处理用户登出逻辑
    // 清除登录状态和用户信息
    localStorage.removeItem('isLoggedIn')
    localStorage.removeItem('user')

    commit('SET_USER', null)
    commit('SET_LOGGED_IN', false)
  }
}

const mutations = {
  SET_USER(state, user) {
    state.user = user
  },
  SET_LOGGED_IN(state, value) {
    state.isLoggedIn = value
  }
}

上述代码中，我们在用户登录和登出逻辑中使用localStorage.setItem()和localStorage.removeItem()来存储和清除登录状态和用户信息。

在Vuex Store的mutations中，我们使用commit()方法来触发SET_USER和SET_LOGGED_IN的mutations，以更新Vuex Store中的用户信息和登录状态。