Fatal编程技术网
  • javascript/
  • Javascript 将静默续订入口点添加到React（创建React应用程序）

Javascript 将静默续订入口点添加到React（创建React应用程序）

javascript reactjs webpack

Javascript 将静默续订入口点添加到React（创建React应用程序）,javascript,reactjs,webpack,create-react-app,Javascript,Reactjs,Webpack,Create React App,我使用模块创建了一个React应用程序。最近一位客户要求我与oidc集成。为此，我正在使用redux，因为我的应用程序中已经有redux 我们设法将我的应用程序集成到他们的身份服务器中，我能够登录并获得存储在redux中的用户令牌。问题是，我正在努力在我的CreateReact应用程序中进行设置，因为我必须添加一个额外的入口点。有没有一种方法可以在不弹出create react应用程序的情况下，将一个额外的入口点添加到silent\u renew/index.js 目前我已经创建了一个名为sil

我使用模块创建了一个React应用程序。最近一位客户要求我与oidc集成。为此，我正在使用redux，因为我的应用程序中已经有redux

我们设法将我的应用程序集成到他们的身份服务器中，我能够登录并获得存储在redux中的用户令牌。问题是，我正在努力在我的CreateReact应用程序中进行设置，因为我必须添加一个额外的入口点。有没有一种方法可以在不弹出create react应用程序的情况下，将一个额外的入口点添加到
silent\u renew/index.js

目前我已经创建了一个名为silent_renew的文件夹，其中包含一个
index.js
文件。此文件夹还包含一个
silent\u renew.html
文件，其中没有太多内容（请参阅：类似于我的文件夹结构）。

如果未弹出以下内容，则无法添加自定义网页加载程序：

我们不打算提供特定于网页包的覆盖，因为它非常脆弱。人们将开始依赖于特定的加载程序和插件，我们将无法改善整体体验

资料来源：

如果要添加新的特定条目文件，首先需要弹出
warn
，然后编辑
config/webpack.config.dev.js:34
和
config/webpack.config.prod.js:55
。
这同样适用于添加新的网页包加载器。

如前所述，更改
create react app
的网页包配置将违背此项目的目的，提供一种零配置进行react的方法

恐怕解决办法是弹出你的应用程序，这是不可逆的

执行此操作后，使用
index.js
和
index.html
文件在项目根目录下创建
silent\u renew
目录，为redux创建一个
store
，如图所示（您可能不需要很多这样的东西，比如sagas，路由器和记录器中间件，只需使用
loadUser
逻辑和存储创建），在
src/index.js
文件中导入存储，并创建一个redux
提供者
，如

然后，您可以修改
config/webpack.config.dev.js
，并遵循我们在webpack conf上看到的内容。为
silentRenew
添加
HtmlWebpackPlugin
和
commonchunkplugin
，以及附加入口点

CRA有点让人不安的是，他们的dev和prod的webpack配置完全分开，并且没有扩展共享的webpack配置。您必须在prod和dev配置中执行此操作，或者扩展另一个conf文件以防止冗余，例如

我还建议你使用另一个简单的脚手架，当你没有什么特别的事情要做而不是你想要的（将来可能会更多）时，CRA是很好的。弹出将创建许多您自己的代码库中甚至不需要的文件和代码。我和一位朋友做了一次尝试，但我相信有很多更好的选择。

由于静默更新的登录页只是一个简单的html页面，您可以绕过此网页。只需将以下文件放在公用文件夹中。此外，还包括一份e同一文件夹中的oidc-client.min.js库

public/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>
一旦create react app支持多个入口点（我希望企业登录场景很快就会出现这种情况），此代码就过时了。

您还可以采取在
iframe
中加载主捆绑包的方法，并捕获前面提到的路径

然后，您不需要公开加载oidc客户端库的路径（
oidc client.min.js
或
redux oidc.js
）或将其内容转储到某处

index.js/ts 

import*as React from'React'；
从'react dom'导入{render}；
从'redux oidc'导入{processSilentRenew}；
从“./App”导入应用程序；
如果（window.location.pathname=='/silent-renew'）{
processSilentRenew（）；
}否则{

render（.
我通过简单地添加路由而不是使用单独的端点来实现它。我的设置是一个带有redux、redux oidc和react路由器的create react应用程序

我将
UserManager
配置为使用


{
静默\u重定向\u uri:`${window.location.protocol}/${window.location.hostname}${window.location.port？`:${window.location.port}:“”}/静默\u续订`
}


我在react路由器中添加了此路由：






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


从“React”导入React；
从“redux oidc”导入{ProcessSilenterNew}；
导出常量SilentReconomponent=（）=>{
processSilentRenew（）；
返回(
SILENTRENCOMPONENT
);
};

create react app
的目的是提供一种简单的零配置应用程序的方法。在应用商店中插入
loadUser
是可以的，但我担心更改网页配置并添加此入口点会违反CRA的要求，需要弹出。可能不是你想要的答案，利文g作为评论，但请告诉我是否可以。谢谢@Aperçu。是的，这是我阅读100篇文章时的一种假设。我一点也不熟悉网页包！我确实弹出了我的应用程序，但不确定如何向我的应用程序添加额外的入口路径。我到处都找了，但似乎没有太多关于向应用程序添加入口点的内容弹出的create react app网页包配置文件，除非我错过了。你知道什么或者更好吗？你知道怎么做吗？如果你知道，请添加它作为答案。如果它有效，我将立即奖励奖金。谢谢@enapupe。不知道最好的方法是什么？我已经弹出了我的配置。查看了网页包配置s弹出并尝试添加一个新路径。无法使其工作。我对网页并没有像以前那样太过拘泥 
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)

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'));
}