React Autodesk Forge 创建存储桶

Question

我正在尝试从反应应用程序的前端创建一个存储桶，一旦我解决了这个问题，我将通过后端发出请求。我在 useEffect 钩子内传递一个选项对象并将结果记录到控制台。标头在我从 .env 传入的环境变量上返回未定义。我想知道现在如何从 .env 或硬代码中传入标头？我还需要将范围传递到标题 bucket:create, bucket: read

Buckets.js

import React, { useEffect } from 'react'
import axios from 'axios'

const Buckets = () => {
useEffect(() => {
const options = {
  method: 'POST',
  url: 'https://developer.api.autodesk.com/authentication/v1/authenticate',
  headers: {
    ContentType: 'application/json',
    Authorization: process.env.REACT_APP_FORGE_ACCESS_TOKEN,
    client_id: process.env.REACT_APP_FORGE_CLIENT_ID,
    client_secret: process.env.REACT_APP_FORGE_CLIENT_SECRET,
  },
}
console.log(options)
}, [])

return <div>Buckets</div>
}

导出默认存储桶

Answer 1

代码 sn-p 有几个问题：

• 首先，您应该永远将客户端密码暴露给浏览器；在服务器端实现存储桶创建非常简单
• 其次，您在代码中使用的process.env 构造是Node.js 功能，而不是浏览器中可用的功能；这很可能是标题最终为空的原因

因此，我只建议您在服务器端实现任何 Forge 请求（例如，通过关注 https://learnforge.autodesk.io），然后通过几个端点将该功能公开给您的 React 前端。

编辑：如 cmets 中所述，我正在开发“用于 Node.js 的非官方 Forge SDK”，并且该库确实为浏览器提供了实验性支持。试试这样的：

    <script src="https://cdn.jsdelivr.net/npm/forge-server-utils/dist/browser/forge-server-utils.js"></script>
    <script>
        const client = new forge.DataManagementClient({ client_id: '...', client_secret: '...' });
        client.listBuckets()
            .then(buckets => { console.log('Buckets', buckets); })
            .catch(err => { console.error('Could not get buckets', err); });
    </script>