创建 React App 注入环境变量

Question

我是 React 新手，刚开始使用 create-react-app 模板。我正在开发一个使用 REST API.

的 SPA

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

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

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

由于身份验证服务器不支持cors，我无法在react app中执行此post请求。

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

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

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

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

process.env.REACT_APP_CRM_API_ACCESS_TOKEN = response.access_token;

现在我想在 React 应用程序中访问这个变量 - 但这里 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

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

构建时使用 REACT_APP_ 前缀。将 REACT_APP_CRM_API_ACCESS_TOKEN 放入 env 后是否正在构建？如果没有，则该应用程序没有它们。

如果您很高兴在 JS 包中拥有令牌，那么就使用它。

根据您计划如何在各种环境中推广您的构建，您可能会遇到其他问题。

这是一种可能的管道和您会遇到的问题。

你有分期和制作。

您构建了您的应用程序，并最终在捆绑包中内置了暂存环境变量。

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

两种解决方法：

在生产环境中重建，以便将产品变量放入包中。
使用网络服务器将环境中的变量注入 SPA 中的文件之一。

我已经经历了 4 次了，每次都对我的解决方案进行了微调。每次都是在弹出的 CRA 应用程序上，每个解决方案都不是很干。

我现在正在尝试为未弹出的 CRA 解决它，但再次尝试找到 DRY 解决方案被证明是棘手的。

如果我找到更好的方法，将更新此答案。

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

创建 React App 注入环境变量

Create React App inject environment variable

environment-variables

create-react-app