Vue项目中通过axios设置通用header

一般情况下我们设置header都是在axios的响应拦截器中进行设置，如下面代码所示：

axios.interceptors.request.use(function(config){
	//比如是否需要设置 token
	config.headers.token='eysasmdsakwnfnasdklasj'
	return config
})

不过我们可以试想一下axios有没有提供给我们一个一劳永逸的方法，设置或删除某个特定的header呢，让它在每次请求中都出现。

axios文档中恰好有相关设置，上图中的代码意味着每次请求设置都会被响应。

store中的代码

 mutations:{
   login(state,rawData){
     const {token} = rawData.data
     state.token = token
     axios.defaults.headers.common.Authorization = `Bearer ${token}`
    },
   fetchCurrentUser(state, rowData) {
      state.user = { isLogin: true, ...rowData.data }
    }
  },
 actions:{
    login({ commit }, payload) {
      return postAndCommit('/user/login', 'login', commit, payload)
    },
    fetchCurrentUser({ commit }) {
      return getAndCommit('/user/current', 'fetchCurrentUser', commit)
    },
    loginAndFetch({ dispatch }, loginData) {
      return dispatch('login', loginData).then(() => {
        return dispatch('fetchCurrentUser')
      })
    }
 }

Login.vue代码

  const onFormSubmit = (result: boolean) => {
      if (result) {
        const payload = {
          email: emailVal.value,
          password: passwordVal.value
        }
        store.dispatch('loginAndFetch', payload).then((rawData) => {
          console.log(rawData.data.token)
            router.push('/')
        })
      }
    }

调用一下获取用户信息的请求，发现header已经设置好了