使用 localStorage 持久化用户登录状态

在现代Web应用中，保持用户的登录状态是一个非常重要的功能。本文将介绍如何使用localStorage和Vuex在用户登录后持久化登录状态，并在页面刷新后保持用户的登录状态。

1. store/index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null // 用户信息
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    clearUser(state) {
      state.user = null;
    }
  },
  actions: {
    login({ commit }, user) {
      commit('setUser', user);
      // 将用户信息存储到 localStorage
      localStorage.setItem('user', JSON.stringify(user));
    },
    logout({ commit }) {
      commit('clearUser');
      // 从 localStorage 移除用户信息
      localStorage.removeItem('user');
    }
  }
});

二、应用启动时恢复用户信息

在应用启动时，从localStorage中恢复用户信息到Vuex中：

main.js

import Vue from 'vue';
import App from './App.vue';
import store from './store';

Vue.config.productionTip = false;

// 从 localStorage 中恢复用户信息
const user = JSON.parse(localStorage.getItem('user'));
if (user) {
  store.commit('setUser', user);
}

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

三、用户登录后存储用户信息

在用户登录后，将用户信息存储到Vuex和localStorage中：

登录组件

<template>
  <div>
    <!-- 登录表单 -->
    <button @click="login">登录</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['login']),
    login() {
      // 假设你已经通过 API 获取了用户信息 user
      const user = {
        id: 1,
        name: 'John Doe',
        token: '1234567890abcdef'
      };

      // 存储到 Vuex 和 localStorage
      this.login(user);
    }
  }
};
</script>

四、使用用户信息

你可以在应用的任何地方使用Vuex中存储的用户信息。例如：

某个组件

<template>
  <div>
    <p v-if="user">欢迎, {{ user.name }}</p>
    <p v-else>请登录</p>
    <button @click="logout">注销</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['user'])
  },
  methods: {
    ...mapActions(['logout'])
  }
};
</script>

五、总结

通过以上步骤，你就可以在用户登录后将登录状态存储在localStorage中，并在页面刷新后保持登录状态。这样可以确保用户在刷新页面或重新打开浏览器后仍然保持登录状态。

希望本文对你有所帮助。如果你有任何问题或建议，欢迎在评论区留言讨论。