vue Nuxt で axiosを利用する

本稿について

本稿はサイト運営者が学んだことなどを記したメモの内容です。
全てが正確な情報とは限りません。ご注意ください。また修正するべき点は適時修正していきます

インストール
$ npm install @nuxtjs/axios

nuxt.config.js
export default {
  modules: ['@nuxtjs/axios'],

  axios: {
    baseURL: "https://hogehoge.com",
    https: true,
  },
}

vueファイルの中で以下のように利用できる
methods: {
  getData: async function() {
    const response = await this.$axios.$get('/api/v1/space')
  }
}



必ずtokenを挟みたい場合にはpluginを作る
plugins/axios.js
import _ from "lodash";
import axios from 'axios'

export default function ({ app, env, isServer }) {
  axios.interceptors.request.use(
    (config) => {
      if (this.$store.state.auth.token) {
        config.headers['Authorization'] = 'Bearer ' + this.$store.state.auth.token
      }
      return config
    },
    (error) => {
      return Promise.reject(error)
    }
  )
}

nuxt.config.js
plugins: ['~/plugins/firebase.js', '~/plugins/axios'],

[参考]

Back