Question

我是Vue的新手（我是一名反应员），并且遇到了这个问题。

axios.js

import store from '../../store/index';
import axios from 'axios'

const API_URL = process.env.API_URL;
const token = store.getters.auth.token;

export default  axios.create({
baseURL: API_URL,
headers: {
  'Content-Type': 'application/json',
  'Authorization': `Bearer ${token}`
 }
})

store / index.js

import auth from './modules/auth'

Vue.use(Vuex);

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({

  state: {},
  getters : {},
  mutations: {},
  actions:{},

  modules: {
    auth
  },
  strict: debug,
})

modules / auth

import { AUTH_SUCCESS, AUTH_GUEST } from '../actions/auth'
import axios from '../../util/axios/axios'
import Vue from "vue";

const state = {
  token: localStorage.token || '',
};

const getters = {
  token: state => state.token
};

const actions = {
  [AUTH_GUEST]: async ({commit}) => {
    await axios.post('auth/register',)
      .then(response => {
        commit(AUTH_SUCCESS, response);
      })
      .catch(error => {
        console.log(error);
      });
  },
};

const mutations = {
  [AUTH_SUCCESS]: (state, resp) => {
    state.token = resp.data.token;
  },
}

export default {
  state,
  getters,
  actions,
  mutations,
}

当尝试从store/index获取商店时，它将返回undefined。可能是在初始化存储之前调用了axios。

但是我该怎么处理？

应用程序的流程是。

user register->get token->update store with this token->add to the axios header.

因此，到目前为止，对api的所有调用都会提供令牌。

Answer 1

首先，您应注意Vue's reactivity caveats，这也会影响Vuex。在您的情况下，您是要在对象内部添加一个新属性以实现突变。

回到主要问题，axios.js文件是在构建Store实例之前执行的，这就是为什么您无法访问它并得到未定义的原因。

我要做的是：

axios.js

import axios from 'axios';
const API_URL = process.env.API_URL;

export default (store) => axios.create({
  baseURL: API_URL,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${store.getters.auth.token}`
  }
});

然后在您的主文件中，您具有主Vue实例化，我将在其中运行该函数，并导出该函数的返回结果。

设置axios授权标头取决于商店更改

1 个答案: