vue3项目调一个鉴权接口 这个接口会返回一个业务员的工号和token 想把这个工号token存起来 让每个组件调接口的时候都可以随时拿到这个工号 每个组件调用其他接口的时候带上这个token 这个token放在请求头对应的地方 怎么做

在Vue3项目中，为了存储工号和token并让各个组件能够方便地访问并在需要时发送带有token的请求，你可以采取以下步骤：

1. **状态管理**:
使用Vue3的官方状态管理库如Vuex，它可以帮助你在应用全局范围内管理数据，包括用户的工号和token。创建一个store，将`user`作为其中的一个模块。

// store/index.js
import { createStore } from 'vuex'
import userModule from './modules/user'

export default createStore({
  modules: {
    user: userModule,
  }
})

2. **userModule**:
在`userModule`中定义state、getter和mutation来操作工号(token)。

// store/modules/user.js
export const state = {
  employeeId: '',
  token: ''
}

export const getters = {
  getToken: (state) => state.token
}

export const mutations = {
  setEmployeeId(state, id) {
    state.employeeId = id
  },
  setToken(state, token) {
    state.token = token
  }
}

3. **调用鉴权接口**:
在登录成功后，通过actions来设置这两个值。

// store/actions.js
import { commitMutation } from '../store'
import { setEmployeeId, setToken } from './mutations'

export const loginSuccess = async ({ commit }, response) => {
  commit(setEmployeeId, response.data.employeeId)
  commit(setToken, response.data.token)
}

4. **组件内获取和使用**:
使用`mapGetters`从store中获取值，并在需要的地方调用。

// 组件.vue
<template>
  <div>
    <h1>员工ID: {{ getUserInfo().employeeId }}</h1>
    <!-- ... -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['getToken']),
    getUserInfo() {
      return {
        employeeId: this.$store.getters.employeeId,
        token: this.$store.getters.getToken
      };
    }
  },
  methods: {
    makeApiRequest() {
      // 将token添加到headers
      axios.get('/api', {
        headers: {
          Authorization: `Bearer ${this.getUserInfo().token}`
        }
      })
        .then(response => {
          // 处理响应...
        })
        .catch(error => {
          console.error('Error:', error);
        });
    }
  }
}
</script>

现在，当你登录成功后，`employeeId`和`token`就会存储在Vuex中，所有依赖它们的组件都能轻松获取并用于请求中。每次组件需要调用其他接口时，都只需调用`makeApiRequest`方法即可。