Question

我使用create-react-app模块创建了一个React应用程序。我最近被客户要求与oidc集成。出于这个目的，我使用redux-oidc，因为我已经在我的应用程序中使用了redux。

我们设法将我的应用程序集成到他们的身份服务器中，并且我能够登录并获取存储在redux中的用户令牌。问题是我在我的create-react-app应用程序中努力设置silent renew，因为我必须添加一个额外的入口点。有没有办法在不弹出create-react-app的情况下向silent_renew/index.js添加额外的入口点？

目前，我已经创建了一个名为silent_renew的文件夹，其中包含index.js个文件。此文件夹还包含一个silent_renew.html文件，其中没有多少文件（请参阅：example app与我的文件夹结构类似）。

Answer 1

由于silent_renew的登录页面只是一个简单的html页面，因此您可以绕过webpack。只需将以下文件放在公用文件夹中即可。另外，在同一文件夹中包含oidc-client.min.js库的副本。

公共/ silent_renew.html：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <script src="oidc-client.min.js"></script>
  <script>
      new Oidc.UserManager().signinSilentCallback().then()
  </script>
</body>
</html>

这适用于我的网站develepment配置。对于生产配置，我有以下几点（我还没有测试它，但我很有信心这是前进的方向......）。

公共/ index.js

const express = require('express')
const path = require('path')
const app = express()

app.use(express.static('.'))

app.use((req, res, next) => {
  if (path.extname(req.path).length > 0) {
    next()
  } else if (path.dirname(req.path).indexOf('silent_renew') > -1) {
    req.url = '/silent_renew.html'
    next()
  }
  else if (path.dirname(req.path).indexOf('callback') > -1) {
    req.url = '/callback.html'
    next()
  } else {
    req.url = '/index.html'
    next()
  }
})

app.listen(3000)

一旦create-react-app支持多个入口点（我希望很快就会出现企业登录场景），这段代码就会过时。

Answer 2

您还可以采用将主捆绑包加载到iframe并捕获路径的方法，如here所述。

然后，您无需处理公开加载oidc客户端库（oidc-client.min.js或redux-oidc.js的路径或将其内容转储到某个地方的情况。

index.js / ts

import * as React from 'react';
import { render } from 'react-dom';
import { processSilentRenew } from 'redux-oidc';
import App from './App';

if (window.location.pathname === '/silent-renew') {
  processSilentRenew();
} else {
  render(<App />, document.getElementById('root'));
}

请注意，/silent-renew请求的性能可能会受到与应用程序一起加载的大文件的负面影响。在comment中对此有一些想法。

Answer 3

我通过简单地添加路由而不是使用分离端点来使其工作。我的设置是一个带有redux，redux-oidc和react-router的create-react-app。

我将UserManager配置为使用

{
    silent_redirect_uri: `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ""}/silent_renew`
}

我在我的react-router中添加了此路由：

<Route exact={true} path={"/silent_renew"} component={SilentRenewComponent} />

SilentRenewComponnent是一个简单的函数组件，它调用redux-oidc函数来处理重定向。

import React from "react";
import { processSilentRenew } from "redux-oidc";

export const SilentRenewComponent = () => {
    processSilentRenew();
    return(
        <div>SilentRenewComponent</div>
    );
};

Answer 4

如果您尚未退出，则无法添加自定义webpack加载程序：

我们不打算提供特定于Webpack的覆盖，因为它会非常脆弱。人们将根据特定的加载器和插件开始，我们将无法改善整体体验。

来源：https://github.com/facebookincubator/create-react-app/issues/99#issuecomment-234657710

如果您想添加新的特定条目文件，首先需要yarn eject，然后修改config/webpack.config.dev.js:34和config/webpack.config.prod.js:55。这同样适用于添加新的webpack加载器。

Answer 5

如前所述，更改create-react-app的webpack配置将违背此项目的目的，提供了一种使用零配置进行React的方法。

我担心解决方案是弹出你的应用程序，这是不可逆转的。

执行此操作后，使用silent_renew和index.js文件在项目根目录下创建index.html目录，为redux创建store，如{{3} （你可能不需要很多这样的东西，比如sagas，路由器和记录器中间件，只需要loadUser逻辑和商店创建），在src/index.js中导入商店文件并创建一个redux Provider，例如here。

然后，您可以修改config/webpack.config.dev.js并按照this webpack conf中的内容进行操作。为HtmlWebpackPlugin和其他入口点添加CommonsChunkPlugin和silentRenew。

对CRA有点不满的是，他们对dev和prod的webpack配置是完全分开的，不会扩展共享的。您必须在prod和dev配置中执行此操作，或者扩展另一个conf文件以防止冗余，例如redux-oihc-example。

我还建议你使用另一个简单的脚手架，当你没有任何特殊的东西时，CRA很好，不像你想要的那样（未来可能更多）。弹出将创建许多您自己的代码库中甚至不需要的文件和代码。我和一个朋友做了this，但我确信还有很多更好的选择。

向React添加静默续订入口点（create-react-app）

5 个答案: