如何在 Vue 中将 API 应用程序密钥作为道具传递

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”作为道具而不是硬编码，就像作为道具从 Api.js 传递到 App.vue 的“album_name”一样。请让我知道我可以提供的任何其他信息。谢谢

Answer 1

您可以使用 process.env 来存储您的 API 密钥和设置变量。像这样将您的密钥存储在您创建 vue 实例或您的 vue 起点的位置。示例

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

然后在您的 vue.js 应用程序中您可以访问的任何地方

console.log(process.env.APP_KEY);

查看更多信息in documentation。