使用vue和vuex实现token存储

在Vue和Vuex中实现Token存储，可以将Token保存在Vuex的状态管理器中，这样在整个应用程序中都可以访问到Token。下面是一个简单的示例：

1. 首先，在Vuex中创建一个module，用于存储Token：

// store/modules/auth.js

const state = {
  token: null
}

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

export default {
  state,
  mutations
}

2. 在Vue组件中使用Vuex的mapState和mapMutations方法，将Token存储到Vuex中：

// Login.vue

<template>
  <div>
    <input type="text" v-model="username">
    <input type="password" v-model="password">
    <button @click="login">Login</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  computed: {
    ...mapState({
      token: state => state.auth.token
    })
  },
  methods: {
    ...mapMutations({
      setToken: 'auth/setToken'
    }),
    login() {
      // 发送登录请求，获取Token
      const token = 'xxxxx'
      this.setToken(token)
    }
  }
}
</script>

3. 在需要验证Token的请求中，从Vuex中获取Token：

// api.js

import axios from 'axios'
import store from '@/store'

const api = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Content-Type': 'application/json'
  }
})

api.interceptors.request.use(config => {
  const token = store.state.auth.token
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

export default api

以上是一个简单的实现方法，当然，实际应用中还需要考虑Token的过期时间和刷新等问题。