javascript - 如何在 Vue 中将 API 应用程序密钥作为道具传递
问题描述
我需要将 api 应用程序密钥作为道具传递,以便动态更改它,而不是硬编码密钥。提供的代码将更详细地显示问题。
应用程序.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”一样。请让我知道我可以提供的任何其他信息。谢谢
解决方案
您可以使用 process.env 来存储您的 API 密钥和设置变量。像这样将您的密钥存储在您创建 vue 实例或您的 vue 起点的位置。例子
module.exports = {
NODE_ENV: '"production"',
APP_KEY: '"blablakey"'
}
然后在你的 vue.js 应用程序中的任何地方你都可以访问
console.log(process.env.APP_KEY);
在文档中查看更多信息。
推荐阅读
- c - 在c中连接两个字符
- ios - 动态更新 uicollectionview 单元格高度
- json - ElasticSearch - JSON 处理器输出单个字段名称,省略其余部分
- php - 如何将多维数组php中所有id值的子数组计数限制为5?
- python - python的pip install func在我的win系统上不起作用
- javascript - Safari 中不需要的页面重新加载
- mysql - 如果未启用每个文件的 innodb,如何在 mysql 5.6 中查找 innodb 表的数据长度和索引长度
- c++ - 物理子弹 - 任何“幽灵”身体?
- javascript - Google Chrome 扩展:通过 chrome.tabs.executeScript 将注入脚本中的变量暴露给以相同方式注入的另一个脚本
- reactjs - 如何在单击下一步按钮时触发获取以选择下一页