没有随请求发送令牌答案

【问题标题】：No token being sent with request没有随请求发送令牌
【发布时间】：2020-01-25 03:00:20
【问题描述】：

我有一个 Vuex 动作，每次加载页面时都会运行（不是 router.push），这个函数似乎运行良好，因为它检查令牌并且如果令牌存在，它会继续前进。我的问题是我正在调度另一个需要此令牌的操作。

好吧，再清楚一点，我正在使用 Axios 和 Vue.js 来发送 API 请求。我在 main.js 文件中将授权标头设置为 Vuex 存储值。然后我让我的 App.uve 加载触发一个默认操作来运行它检查令牌 (JWT) 的存在。此默认操作还调度另一个名为 storeUser 的操作，该操作将 GET 请求发送到用户信息 API 端点。发送此用户信息 API 调用时，我在后端看到它不是授权的 API 调用。检查标题我需要授权标题是undefined。以下是我认为是相关的代码。

在 App.vue 加载时运行的默认操作

tryAutoLogin({commit, dispatch}) {
  const token = localStorage.getItem('token')
  if(!token) {return}
    commit('authUser',{
    token
  })
  dispatch('storeUser')
},

导致问题的第二个操作

storeUser({commit, state}, userData) {
  if(!state.token) return
  axios.get('/user/userInfo')
   .then(res => {
     console.log(res)
  })
   .catch(err => {
     console.log(err)
  })
},

main.js 需要的部分

import store from './store/store.js'
axios.defaults.headers.common['Authorization'] = store.token
new Vue({
  render: h => h(App),
  store,
  router
}).$mount('#app')

我在 main.js 中删减了大量内容以使其更简洁，但这些都是与此问题相关的部分。我不认为还有别的。

store.js 状态

state: {
  token: null,
  name: '',
  companyName: ''
},

【问题讨论】：

axios.defaults.headers.common['Authorization'] = store.token ????这只会发生一次，在您设置令牌之前。改用拦截器在调用时将令牌添加到请求中
还有，应该是store.state.token
@Phil 谢谢拦截器方法奏效了。

标签： vue.js axios vuex

【解决方案1】：

感谢 OP 上 cmets 中的 Phil，我可以使用以下代码。

axios.interceptors.request.use(function (config) {
  config.headers.Authorization = store.state.token;
  return config;
}, function (error) {
  return Promise.reject(error);
});

【讨论】：