vue中token的持久化以及使用策略

使用vuex-persistedstate将token存储到本地localStorage也存储到vuex中,当想要验证token的时候,是从本地拿token,还是从vuex中拿

在使用 vuex-persistedstate 将 Token 存储到本地 localStorage 并同步到 Vuex 中时，你可以从 localStorage 或 Vuex 中获取 Token 进行验证。具体选择哪种方式取决于你的应用场景和性能考虑。下面是一些指导原则和实现方法：

选择存储位置的原则

1. 从 Vuex 获取：

   • 优点：Vuex 是应用的状态管理库，状态是响应式的，可以方便地在组件中通过 mapState 或 this.$store.state 访问。
   • 缺点：如果 Vuex 状态未初始化完成（例如应用刚启动时），可能需要等待状态加载完毕。

2. 从 localStorage 获取：

   • 优点：localStorage 是持久化的，即使页面刷新或关闭后重新打开，数据仍然存在。可以直接通过 localStorage.getItem('token') 获取，无需等待 Vuex 初始化。
   • 缺点：每次获取都需要访问 localStorage，虽然性能影响不大，但在某些情况下可能会稍微慢一些。

实现步骤

1. 安装 vuex-persistedstate：

   1npm install vuex-persistedstate
   

2. 配置 Vuex 和 vuex-persistedstate：

   1// store/index.js
   2import Vue from 'vue';
   3import Vuex from 'vuex';
   4import createPersistedState from 'vuex-persistedstate';
   5
   6Vue.use(Vuex);
   7
   8const store = new Vuex.Store({
   9  state: {
   10    token: null,
   11    // 其他状态
   12  },
   13  mutations: {
   14    setToken(state, token) {
   15      state.token = token;
   16    },
   17    removeToken(state) {
   18      state.token = null;
   19    },
   20  },
   21  actions: {
   22    saveToken({ commit }, token) {
   23      commit('setToken', token);
   24    },
   25    clearToken({ commit }) {
   26      commit('removeToken');
   27    },
   28  },
   29  plugins: [
   30    createPersistedState({
   31      key: 'my-app',
   32      paths: ['token'],
   33    }),
   34  ],
   35});
   36
   37export default store;
   

3. 在应用中使用：

   • 从 Vuex 获取 Token：

     1// 在组件中
     2computed: {
     3  ...mapState(['token']),
     4},
     5methods: {
     6  validateToken() {
     7    if (this.token) {
     8      // 验证 Token 的逻辑
     9    } else {
     10      // 处理没有 Token 的情况
     11    }
     12  }
     13}
     

   • 从 localStorage 获取 Token：

     1// 在组件中
     2methods: {
     3  validateToken() {
     4    const token = localStorage.getItem('token');
     5    if (token) {
     6      // 验证 Token 的逻辑
     7    } else {
     8      // 处理没有 Token 的情况
     9    }
     10  }
     11}
     

推荐的实践

1. 初始化时从 localStorage 获取 Token 并同步到 Vuex：

   • 在应用启动时，可以从 localStorage 获取 Token 并同步到 Vuex 中，确保 Vuex 状态是最新的。
   • 可以在 created 或 mounted 生命周期钩子中进行这个操作。

   1// main.js
   2import Vue from 'vue';
   3import App from './App.vue';
   4import store from './store';
   5
   6new Vue({
   7  store,
   8  render: h => h(App),
   9  created() {
   10    const token = localStorage.getItem('token');
   11    if (token) {
   12      this.$store.dispatch('saveToken', token);
   13    }
   14  }
   15}).$mount('#app');
   

2. 后续验证时从 Vuex 获取 Token：

   • 一旦 Vuex 状态初始化完成，后续的 Token 验证可以从 Vuex 中获取，这样可以利用 Vuex 的响应式特性。

   1// 在组件中
   2computed: {
   3  ...mapState(['token']),
   4},
   5methods: {
   6  validateToken() {
   7    if (this.token) {
   8      // 验证 Token 的逻辑
   9    } else {
   10      // 处理没有 Token 的情况
   11    }
   12  }
   13}
   

通过这种方式，你可以在应用启动时从 localStorage 获取 Token 并同步到 Vuex，然后在后续的操作中从 Vuex 获取 Token，这样既保证了数据的一致性，又利用了 Vuex 的响应式特性。