Как передать ключ приложения API в качестве опоры в Vue

Question

Мне нужно передать ключ приложения api как опору, чтобы динамически изменить его, а не жестко кодировать ключ. Приведенный код представит проблему более подробно.

App.vue:

<template>
...
</template>

<script>
import Api from './Api.js'

export default {
  name: 'Widget',
  components: {
    someComponent
  },
  props: {
    albumName: {
      type: String,
      default: 'Homepage'
    }
  },
  data () {
    return {
      .....
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    async fetchData () {
      const options = {
        'album_name': this.$props.albumName
      }

      const { images, pagination } = await Api.getData(options)
      this.media = this.media.concat(images)
      this.morePagesAvailable = (pagination.page * pagination.per_page) < pagination.total
    },
  .....
</script>

Api.js

import 'whatwg-fetch'
import queryString from 'query-string'

const APP_KEY = '1s4...dzqvux'

const getData = async (options) => {
  const params = queryString.stringify({
    ...options
  })

  const response = await window.fetch(`https://someURL/${APP_KEY}/theAlbumParameters?${params}`, {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' }
  })

  return response.json()
}

Api = {
  async getData (options) {
    const data = await getData(options)
    return data.response
  }
}

export default Api

Я хотел бы иметь "APP_KEY" в качестве реквизита вместо жестко запрограммированного, как "album_name", которое передается в виде реквизита из Api.js в App.vue. Пожалуйста, дайте мне знать с любой другой информацией, которую я могу предоставить. Спасибо

Answer 1

Вы можете использовать process.env для хранения ключей API и переменных настроек. Храните свой ключ, например, там, где вы создаете свой экземпляр vue или где ваша начальная точка vue. пример

module.exports = {
  NODE_ENV: '"production"',
  APP_KEY: '"blablakey"'
}

тогда везде в вашем приложении vue.js вы можете получить доступ

console.log(process.env.APP_KEY);

Смотрите больше информации в документации.