Question

我目前正在使用Nuxt，并且使用axios在我的应用程序中创建了一个中央ApiClient。

services / apiClient.js

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

const token = () => {
  return store().getters.getToken;
};

const axiosClient = axios.create({
  baseURL: "this-is-a-url",
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'X-Api-Key': token() // this returns error: Object(...) is not a function from Vuex
  }
});

axiosClient.interceptors.request.use(function (config) {
  console.log(token()); // this prints the token type string
  return config;
}, function (error) {
  return Promise.reject(error);
});

当我在axios标头中使用token()时，出现错误： Uncaught TypeError: Object(...)，但是当我从axios拦截器调用它时，我得到了正确的令牌类型String。

store / index.js

import Vuex from 'vuex';
import * as sessions from './modules/sessions';

const store = () => {
  return new Vuex.Store({
    getters: {
      isAuthenticated() {
        return sessions.state.token != null;
      }
    },
    modules: {
      sessions
    }
  });
};

export default store;

store / modules / sessions.js

import axios from 'axios';

export const state = {
  token: localStorage.getItem('token') || null,
};

export const mutations = {
  SET_TOKEN(state, token) {
    state.token = token;
  }
};

export const actions = {
  login({ commit }) {
    return new Promise((resolve, reject) => {
      axios.get(`/retrieveKey`)
        .then(response => {
          localStorage.setItem('token', response.data.value);
          commit('SET_TOKEN', response.data.value);
          resolve(response.data);
        })
        .catch(error => {
          reject(error);
        });
    });
  },
  logout({ commit }, context) {
    localStorage.removeItem('token');
    window.location.reload();
  }
};

export const getters = {
  getToken(state) {
    return state.token;
  }
};

Answer 1

最新答案

也许可以将console.log调试为在令牌函数中调试store（），store（）。getters和store（）。getters.getToken的值，如下所示，并比较axiosClient调用和拦截器调用之间的差值

const token = () => {
  const store = store();
  const getters = store.getters;
  const getToken = getter.getToken;
  console.log(store, getters, getToken)
  return getToken;
};

错误消息“此返回错误：Object（...）不是Vuex的函数”是因为令牌等于axiosClient中的 null 。

是因为 localStorage.getItem（'token'）的初始状态为null / undefined，因此其值在登录完成前变为 null 。

export const state = {
  token: localStorage.getItem('token') || null,
};

请参阅Getters of Vuex guide，这些吸气剂将显示在store.getters对象上，您可以将值作为属性访问。

也许您可以通过store.getters.getToken而不是store().getters.getToken获得令牌值？

Vuex Axios标头返回未捕获的TypeError：Object（...）不是来自Vuex的函数

1 个答案:

最新答案