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

Question

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

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)

问题应该更容易诊断。

另外，除非你做定制，你还需要在header值中设置一个授权类型，使值变成Bearer <token>或者Basic <token>