Vue开发中session和vuex如何配合使用token -

问题：前后端分离开发中，token 在前端已经放在session中存储了，可以不放在vuex中存储吗？如果需要，那么为什么要放在vuex中存储呢？

在前后端分离开发中，token 一般用于身份验证和授权。如果已经将 token 存储在 sessionStorage 中，这是一个合理的做法。至于是否需要将 token 也存储在 Vuex 中，这取决于具体需求和应用场景。

1. 可以不放在 Vuex 中存储

如果你只需要在每次请求时读取 token，并不需要在 Vue 应用的其他地方频繁访问 token，那么你可以只将 token 存储在 sessionStorage 中，每次请求时从 sessionStorage 中读取：

// 从 sessionStorage 中读取 token 并附加到请求头
const token = sessionStorage.getItem('token');
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

2. 需要放在 Vuex 中存储的情况

然而，在某些情况下，将 token 存储在 Vuex 中是有好处的：

全局访问：如果你的应用中有多个组件需要访问 token，或者需要基于 token 的状态做一些逻辑处理，将 token 存储在 Vuex 中会使访问和管理更方便。例如，可能有一个导航栏组件，需要显示用户的登录状态。
状态管理： Vuex 是一个专门用于管理应用状态的库，将 token 存储在 Vuex 中，可以与其他状态一起管理，使得应用的状态管理更加集中和规范。
响应式数据： Vuex 的状态是响应式的，任何依赖 token 状态的组件都会自动更新，而 sessionStorage 不是响应式的，无法自动触发视图更新。

3. 示例：在 Vuex 中存储 token

如果你决定将 token 存储在 Vuex 中，可以按照以下步骤进行：

在 Vuex store 中定义 token 状态：

// store.js
export default new Vuex.Store({
  state: {
    token: sessionStorage.getItem('token') || ''
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
      sessionStorage.setItem('token', token); // 同步更新 sessionStorage
    },
    clearToken(state) {
      state.token = '';
      sessionStorage.removeItem('token');
    }
  },
  actions: {
    saveToken({ commit }, token) {
      commit('setToken', token);
    },
    removeToken({ commit }) {
      commit('clearToken');
    }
  }
});

在组件中使用 token：

<template>
  <div>
    <p>User is {{ isLoggedIn ? 'logged in' : 'logged out' }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    isLoggedIn() {
      return !!this. $store.state.token; } }, methods: { login() { // 假设 login 成功后获取到 token const token = 'some-token'; this.$ store.dispatch('saveToken', token);
    },
    logout() {
      this.$store.dispatch('removeToken');
    }
  }
}
</script>

在请求拦截器中使用 Vuex 中的 token：

import store from './store';

// 请求拦截器
axios.interceptors.request.use(config => {
  const token = store.state.token;
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});