如何在Vuex中通过全局拦截器让Axios向Django API传递CSRF Token

当然有办法解决这个重复劳动的问题！结合Vuex和Axios拦截器，就能实现全局自动注入CSRF Token，再也不用每次写重复的headers配置了。下面给你一步步拆解实现方式：

1. 在Vuex Store中管理CSRF Token状态 #

首先我们把CSRF Token存到Vuex的状态里，方便全局获取，还能在需要的时候动态更新：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import Cookie from 'js-cookie'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 初始化时直接从Cookie读取CSRF Token
    csrfToken: Cookie.get('csrftoken') || ''
  },
  mutations: {
    // 用于更新Token的mutation（比如Cookie过期刷新后）
    SET_CSRF_TOKEN(state, token) {
      state.csrfToken = token
    }
  },
  actions: {
    // 可选：如果需要主动刷新Token，调用这个action
    refreshCsrfToken({ commit }) {
      const newToken = Cookie.get('csrftoken')
      commit('SET_CSRF_TOKEN', newToken)
    }
  },
  getters: {
    // 提供全局获取Token的getter
    csrfToken: state => state.csrfToken
  }
})

2. 配置Axios请求拦截器自动添加Token #

接下来给Axios设置全局请求拦截器，在每次请求前判断请求方法，自动为POST/PUT/DELETE请求加上CSRF Token：

// main.js（或者你的Axios配置文件）
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import axios from 'axios'

// 注册Axios请求拦截器
axios.interceptors.request.use(
  config => {
    // 只对POST、PUT、DELETE请求添加CSRF Token
    const methodsNeedCsrf = ['post', 'put', 'delete']
    if (methodsNeedCsrf.includes(config.method.toLowerCase())) {
      const csrfToken = store.getters.csrfToken
      if (csrfToken) {
        config.headers['X-CSRFToken'] = csrfToken
      }
    }
    return config
  },
  error => {
    // 处理请求错误
    return Promise.reject(error)
  }
)

// 把Axios挂载到Vue原型上，方便组件调用
Vue.prototype.$axios = axios

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

3. 简化你的业务代码 #

现在你原来的请求方法就可以去掉重复的headers配置了，直接写请求逻辑就行：

putResponseResults: function (context, postData) {
  this.$axios.post('/api/responses/', postData)
    .then(response => {
      // 处理响应数据
      // console.log(response.data)
    })
    .catch(error => {
      // 处理请求错误
    })
}

额外提示 #

• 如果你的项目中使用了自定义的Axios实例（比如单独封装了request.js），只需要在那个实例上添加拦截器即可，不用在main.js里配置。
• 确保你已经安装了js-cookie库（如果用它来读取Cookie）：npm install js-cookie --save
• 如果CSRF Token可能在会话中更新，可以在路由守卫或者页面刷新时调用store.dispatch('refreshCsrfToken')来更新Vuex中的Token。

内容的提问来源于stack exchange，提问作者Sachin Gadhari