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

Posted 2023-03-31

【中文标题】如何在 Vue 中将 API 应用程序密钥作为道具传递

【英文标题】：How to pass an API app key as a prop in Vue

【发布时间】：2019-07-29 16:48:02

【问题描述】：

我需要将 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”一样。请让我知道我可以提供的任何其他信息。谢谢

【参考方案1】：

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

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

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

console.log(process.env.APP_KEY);

查看更多信息in documentation。

【讨论】：

但是，我想将它作为 app.vue 中的道具传递

好的，那就做道具吧，你有什么问题，你卡在哪里了，请提供更多信息