vue如何存储token

在 Vue 中存储 Token 可以使用浏览器提供的 localStorage 或 sessionStorage，也可以使用 Vuex 状态管理库。下面我将分别介绍这三种方式的实现方法。

1. 使用 localStorage

localStorage 是浏览器提供的一种本地存储方式，可以将数据存储在浏览器中供后续使用。在 Vue 中，可以使用 localStorage 存储 Token，代码如下：

// 存储 Token
localStorage.setItem('token', 'your_token_here');

// 获取 Token
const token = localStorage.getItem('token');

2. 使用 sessionStorage

sessionStorage 与 localStorage 类似，也是浏览器提供的一种本地存储方式，但是数据只在当前会话中有效。在 Vue 中，可以使用 sessionStorage 存储 Token，代码如下：

// 存储 Token
sessionStorage.setItem('token', 'your_token_here');

// 获取 Token
const token = sessionStorage.getItem('token');

3. 使用 Vuex

Vuex 是 Vue 中常用的状态管理库，可以将需要共享的状态集中存储，方便管理和调用。在 Vuex 中存储 Token，可以在 store 中定义一个 state，代码如下：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    token: ''
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
    }
  },
  actions: {
    saveToken({ commit }, token) {
      commit('setToken', token);
    }
  }
});

export default store;

在需要存储 Token 的组件中，可以使用 dispatch 方法调用 saveToken 方法将 Token 存储到 Vuex 中，代码如下：

// component.vue
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['saveToken']),
    login() {
      // 登录操作
      this.saveToken('your_token_here');
    }
  }
};

以上三种方式都可以用来存储 Token，选择哪种方式要根据具体需求进行考虑。如果 Token 需要长期存储，可以使用 localStorage；如果 Token 只需要在当前会话中有效，可以使用 sessionStorage；如果需要在多个组件中共享 Token，可以使用 Vuex。