Axios-无法设置全局授权标头

Question

我有一个带有Axios的VueJS vue-cli应用程序，我想用登录后收到的令牌设置全局Authorization标头，以便可以在所有后续请求中重用它。这是我的代码。

main.js

import axios from 'axios'
import store from './store'

console.log(store.state)
axios.defaults.baseURL = 'http://54.38.36.242'
axios.defaults.headers.common['Authorization'] = store.getters.token

当我这样设置标题时，浏览器控制台会显示： Authorization: [object Object]。为什么？

我登录console.log(store.state)后，向我显示令牌已被接收并存储在商店中。

store.js

export default new Vuex.Store({
  state: {
    apiToken: null,
    user: null,
    ...
  },
  mutations: {
    authenticateUser(state, payload) {
      state.apiToken = payload.token
      state.user = payload.user
      state.signedIn = true
    },
    ...
  },
  actions: {
    login({ commit }, payload){
      axios.post('/api/users/login', payload)
        .then(response => {
          commit('authenticateUser', {
            token: response.data.api_token,
            user: response.data.user
          })
          router.replace('/dashboard')
        })
        .catch(error => {
          commit('signInError')
        })
    },
    ...
  },
  getters: {
    token: state => {
      return state.apiToken;
    }
  }
})

我尝试通过store.state.apiToken访问令牌，但是它也不起作用。 我在做什么错了？

Answer 1

看起来response.data.api_token不是纯字符串，而是对象。如果您将标题设置行更改为：

axios.defaults.headers.common['Authorization'] = JSON.stringify(store.getters.token)

该问题应该更容易诊断。

此外，除非您进行定制，否则还需要在标头值中设置授权类型，以使该值变为Bearer <token>或Basic <token>