vue如何存储token

在 Vue 中存储 token 通常有两种方式：

1. 使用浏览器的 localStorage 或 sessionStorage 存储，这样可以在用户关闭浏览器或刷新页面后仍然保持登录状态。

示例代码如下：

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

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

2. 在 Vue 应用中使用 Vuex 状态管理库，将 token 存储在全局的状态中，这样可以方便在组件间共享和访问。

示例代码如下：

在 Vuex 的 store.js 文件中定义一个状态：

const state = {
  token: '',
};

const mutations = {
  setToken(state, token) {
    state.token = token;
  }
};

const actions = {
  // 异步获取 token，然后提交 mutation 更新状态
  async login({ commit }, payload) {
    const res = await api.login(payload);
    const token = res.data.token;
    commit('setToken', token);
  }
};

export default new Vuex.Store({
  state,
  mutations,
  actions,
});

在组件中使用：

// 获取 token
const token = this.$store.state.token;

// 更新 token
this.$store.commit('setToken', 'your_token_here');

需要注意的是，使用 localStorage 或 sessionStorage 存储 token 时，为了安全起见，需要将 token 进行加密或设置过期时间等措施，以防止恶意攻击。