Question

我有一个React组件，它正在客户端的 init 上进行API调用。我不想对我的API密钥进行硬编码（在回购协议中禁止使用），将其放入Meteor.settings.public并没有多大好处，因为可以在控制台中查找它。我想将其保留在Meteor.settings中，但对于客户端而言则是不可见的。我尝试使用一种方法，但是尽管该方法似乎可以在服务器上运行，但该方法调用在客户端上返回的状态未定义。

在服务器上：

Meteor.methods({
  getFileStackAPIKey: function () {
      if (Meteor.settings.fileStackAPIKey) {
          console.log(Meteor.settings.fileStackAPIKey) // returns: [fileStackAPIKey] correctly
          return Meteor.settings.fileStackAPIKey
      }
      else {
          return {message: "Configure Meteor.settings.fileStackAPIKey to connect to FileStack."}
      }
  }});

在客户端上：

console.log(Meteor.call('getFileStackAPIKey')); // returns: undefined

我尝试使用ReactiveVar，并再次在服务器上设置了它，但是在客户端上无法访问。我感觉自己缺少明显的东西。具体来说，我要努力工作的是FileStack。他们的示例代码显示了API密钥的内联硬编码。官方FileStack React软件包也是如此。这似乎不是一个好主意。

Answer 1

它与回调有关。方法的结果将在回调中，因此我需要在客户端上执行的操作更像这样：

Meteor.call('getFileStackAPIKey', (err, res) => {
    console.log("FileStack API Key: " + res);
});

但是因为我真正想做的是将其传递到FileStack初始化中（同样，在客户端），所以我需要将以下内容放入FileStack对象的构造函数中：

// "this" is the FileStack object we're constructing
const fileStackObj = this;
Meteor.call('getFileStackAPIKey', (err, apiKey) => {
    // here we're inside the callback, so we have the resulting API key
    const client = filestack.init(apiKey, clientOptions);
    // these are synchronous actions dependent on the existence of "client"
    // that we could not do outside of the callback
    fileStackObj.state = {
        client,
        picker: action === 'pick' ? client.picker({ ...actionOptions, onUploadDone: fileStackObj.onFinished }) : null,
    };
    fileStackObj.onFinished = fileStackObj.onFinished.bind(fileStackObj);
    fileStackObj.onFail = fileStackObj.onFail.bind(fileStackObj);
});

如何在React组件中使用Meteor.settings

1 个答案: