Nuxt JS 中间件不能使用 axios

Question

我想创建一个中间件来检查令牌是否有效，但 axios 无法读取。 任何人都可以帮助我如何找到解决方案。 这是我的代码：

中间件/authentication.js

export default  ({ app, redirect }) => {

    let data = {
      'userid': app.$cookies.get('user_id'),
      'token': app.$cookies.get('auth_token'),
    };

    app.$axios.post(`/tokenVerify`,data)
    .then(res => {
      console.log(res)
    })
 }

页面/index.vue

    export default {
        middleware: "authentication",

nuxt.config.js

  modules: [
    '@nuxtjs/axios',
  ],
   axios: {
    proxy: true,
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Accept' : 'application/json, text/plain, */*',
      'Access-Control-Allow-Methods' : 'GET, PUT, POST, DELETE, OPTIONS',
      'Access-Control-Allow-Credentials' : true,
    }
  },

    proxy: {
        '/tokenVerify':{target:process.env.BASE_URL+'index.php/public/tokenVerify', pathRewrite: {'^/tokenVerify': ''}, changeOrigin: true},
        '/vimeoEmbed':{target:'https://vimeo.com/api/oembed.json', pathRewrite: {'^/vimeoEmbed': ''}, changeOrigin: true},
  },

  

Answer 1

您将$axios服务注入到中间件上下文参数中。 所以你应该能够像这样访问它：

export default  ({ app, redirect, $axios }) => {
    let data = {
      'userid': app.$cookies.get('user_id'),
      'token': app.$cookies.get('auth_token'),
    };

    $axios.post(`/tokenVerify`,data)
    .then(res => {
      console.log(res)
    })
 }

Answer 2

就我而言，我正在使用带有 spa 模式的 nuxt。

我已经为axios.js [插件文件夹中的 axios.js] 构建了一个 nuxt 插件，并使用该插件注入应用程序，就像这样......

export default function ({ $axios, redirect, app }, inject) {
  // Create a custom axios instance
  const axios = $axios.create({
    headers: {
      common: {
        Accept: "text/plain, */*",
      },
    },
  });

  axios.setBaseURL(process.env.NUXT_ENV_BASE_URL);

  /**
   * Request interceptor
   */
  axios.onRequest((config) => {
    const token = app.store.getters.token || "";

    if (token) {
      if (config.method !== "OPTIONS") {
        config.headers.authorization = `${token}`;
      }
    }

    return config;
  });

  /**
   * Response interceptor
   */
  axios.onResponse((response) => {
    return response.data;
  });

  /**
   * Error interceptor
   */
  axios.onError((error) => {
    if (!error || !error.response || !error.response.status) {
      app.$notify({
        group: "all",
        title: "Network Error",
        text: `Can not connect to the server.`,
        type: "info",
      });

      return;
    }
  });

  // Inject to context as $axios
  inject("axios", axios);
}

我已经在nuxt.config.js文件中定义了插件位置。 像这样..

plugins: [
  "~/plugins/axios"
]

现在，在我的中间件中，我可以像这样访问 axios ...

export default function (context) {
  context.app.$axios
    .get(API_LINK)
    .then((res) => {
      console.log(res);
    })
    .catch((e) => {
      console.log(e);
    });
}

它对我有用。 如果您需要进一步的解释，请告诉我。