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

当我这样设置标题时，浏览器控制台会显示：CCD_ 1。为什么？

登录后，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>