Question

我是新手做出反应并开始使用create-react-app模板。我正在开发一个使用REST API的SPA。

出于开发目的，我需要使用OAUTH2（访问令牌）对此API进行身份验证。

在生产环境中，我不需要进行身份验证（因为它在同一台机器上运行）。

为了在开发环境中获取此访问令牌，我需要向身份验证服务器发送POST请求（使用client_id和client_secret），然后我会收到进一步请求所需的访问令牌。

由于身份验证服务器不支持cors，我无法在react应用程序中执行此发布请求。

我的解决方案是编写一个节点脚本，执行此发布请求并使用环境变量将令牌注入客户端App。

在package.json中（我做了弹出）我插入了这个脚本（gettoken）：

"start": "npm-run-all -p watch-css gettoken-js start-js"

在gettoken.js文件中，我发出了获取访问令牌和设置的帖子请求（在回调函数中）：

process.env.REACT_APP_CRM_API_ACCESS_TOKEN = response.access_token;

现在我想在反应应用程序中访问此变量 - 但此处process.env.REACT_APP_CRM_API_ACCESS_TOKEN始终未确定。

我做错了什么？是否有另一种方法将access_token注入客户端应用程序？

这是getToken脚本：

var request = require('request');

const endpoint = "https://xxxx/oauth2/token";
const resource = "https://xxxyyy.com";

 const params =  [
  {
    name: 'userName',
    value: 'myuser@user.com'
  },
  {
    name: 'password',
    value: '123'
  },
  {
    name: 'grant_type',
    value: 'password'
  },
  {
    name: 'client_secret',
    value: '11231'
  },
  {
    name: 'client_id',
    value: '123'
  },
  {
    name: 'resource',
    value: resource
  }
];

const encodedParams= Object.keys(params).map((key) => {
  return params[key].name + '=' + encodeURIComponent(params[key].value);
}).join('&');

request(
    {
        method: 'POST',
        uri: endpoint,
        headers: [
            {
              name: 'content-type',
              value: 'application/x-www-form-urlencoded'
            }
          ],
          body: encodedParams + "&"
        }
    ,
    function (error, response, body) {

      //throw new Error("asdfasdf");
        if (error)
        {
            console.log('error', "ERROR GETTING ACCESS TOKEN FROM API: " + error);
        }
        else
        {
          let response = JSON.parse(body);
          process.env.REACT_APP_CRM_API_ACCESS_TOKEN = response.access_token;
          process.env.REACT_APP_CRM_API_ENDPOINT = resource;
          console.log(process.env.REACT_APP_CRM_API_ACCESS_TOKEN);
        }
    }
);

Answer 1

您在创建React应用程序中遇到配置的常见问题。

REACT_APP_前缀用于构建时。在将REACT_APP_CRM_API_ACCESS_TOKEN放入环境后，您是否正在建设？如果没有，该应用程序没有它们。

如果你很高兴在JS包中加上令牌，那就去吧。

根据您计划如何通过各种环境宣传您的构建，您可能会遇到其他问题。

这是一个可能的管道和你将遇到的问题。

你有分期和制作。

您构建应用程序并最终使用内置于捆绑包中的转储env变量。

您将该捆绑包提升为生产版，并且暂存环境变量仍在捆绑包中。

围绕它的两种方式：

重建生产，以便将生产货物放入捆绑包中。
使用Web服务器将环境中的变量注入SPA中的一个文件。

我现在经历了4次，每次稍微调整一下我的解决方案。每次都是在一个弹出的CRA应用程序上，每个解决方案都不是很干。

我现在正试图为一个非弹出的CRA解决它，并且再次尝试找到一个DRY解决方案证明是棘手的。

如果我找到更好的方法，我会更新这个答案。

编辑：因为您已经弹出了应用，所以您可以更改config/env.js以执行您需要的任何操作。包括REACT_APP_前缀的工作方式。

创建React App注入环境变量

1 个答案: