Question

我有一个Vuex动作，该动作在每次页面加载时都会运行（不是router.push），从某种意义上说，此功能运行良好，它可以检查令牌，如果令牌存在则继续前进。我的问题是我正在调度另一个需要此令牌的操作。

好了一点，我将Axios与Vue.js一起使用来发送API请求。我在main.js文件中将授权标头设置为Vuex存储值。然后，我将获得App.uve加载，该加载将触发运行默认操作以检查令牌（JWT）是否存在。此默认操作还分派了另一个名为storeUser的操作，该操作向用户信息API端点发送GET请求。发送此用户信息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: ''
},

Answer 1

感谢Phil在OP上的评论，我的以下代码可以正常工作。

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

没有随请求发送令牌

1 个答案: