Добавление точки молчания для возобновления входа в React (create-react-app)

У меня есть приложение React, созданное с помощью модуля create-react-app. Я недавно попросил клиента интегрироваться с oidc. Для этой цели я использую redux-oidc, так как у меня уже есть сокращение в моем приложении.

Нам удалось интегрировать мое приложение на свой сервер Identity, и я могу войти в систему и получить токен пользователя, хранящийся в redux. Проблема в том, что я изо всех сил пытаюсь настроить молчание в моем приложении для создания приложения-приложения, поскольку мне нужно добавить дополнительную точку входа. Есть ли способ добавить дополнительную точку входа в silent_renew/index.js без извлечения приложения create- silent_renew/index.js -app?

В настоящее время я создал папку с именем silent_renew, содержащую файл index.js. Эта папка также содержит файл silent_renew.html с silent_renew.html количеством (см. Пример приложения, похожего на мою структуру папок).

Ответ 1

Поскольку целевая страница для silent_renew является простой HTML-страницей, вы можете обойти веб-пакет. Просто поместите следующий файл в общую папку. Также включите в эту папку копию библиотеки 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-реакции-приложение поддерживает несколько точек входа (я надеюсь, что это скоро произойдет для сценариев входа в систему предприятия), этот код устареет.

Ответ 2

Вы также можете использовать подход загрузки основного пакета в iframe и захвата пути, как упомянуто здесь.

Тогда вам не нужно иметь дело с указанием пути для загрузки клиентской oidc-client.min.js (oidc-client.min.js или redux-oidc.js) или redux-oidc.js его содержимого где-либо.

index.js/ц

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 могут отрицательно повлиять большие файлы, загружаемые вместе с приложением. Некоторые мысли об этом в комментарии.

Ответ 3

Вы не можете добавить пользовательский загрузчик веб-пакетов, если вы его не выбрали:

Мы не собираемся предоставлять специальные переопределения Webpack, потому что они будут очень хрупкими. Люди начнут в зависимости от конкретных загрузчиков и плагинов, и мы не сможем улучшить общий опыт.

источник: https://github.com/facebookincubator/create-react-app/issues/99#issuecomment-234657710

Если вы хотите добавить новый конкретный файл записи, вам сначала нужно config/webpack.config.dev.js:34 yarn eject затем отредактировать config/webpack.config.dev.js:34 и config/webpack.config.prod.js:55. То же самое верно для добавления новых загрузчиков веб-пакетов.

Ответ 4

Как уже говорилось, изменение конфигурации webpack для приложения create-react-app react create-react-app будет игнорировать то, что цель этого проекта, предоставляя способ сделать React with zero-configuration.

Я боюсь, что решение будет состоять в том, чтобы выгрузить ваше приложение, которое необратимо.

После этого создайте каталог silent_renew в корне вашего проекта с помощью index.js и index.html, создайте store для сокращений, как показано здесь (вам, вероятно, не нужно много всего этого, например саги, маршрутизатор и промежуточное программное обеспечение логгера, просто возьмите логику loadUser и loadUser хранилище), импортируйте хранилище в файле src/index.js и создайте Provider redux, как это.

Затем вы можете изменить config/webpack.config.dev.js и следовать тому, что мы можем видеть на примере web -packs примера redux - oihc. Добавьте HtmlWebpackPlugin и CommonsChunkPlugin для silentRenew и дополнительную точку входа.

Что немного расстраивает CRA, так это то, что их настройка webpack для dev и prod полностью разделена и не распространяется на общий. Вам нужно будет выполнить эту операцию как в конфигурациях prod, так и в dev, или расширить один другой файл conf, чтобы предотвратить избыточность, например, такую как.

Я бы также посоветовал вам использовать еще один простой эшафот, CRA хорош, когда у вас нет ничего особенного в отличие от того, что вы хотите (и, вероятно, больше в будущем). Извлечение создаст много файлов и кода, которые вам даже не нужны в вашей собственной кодовой базе. Мы с подругой сделали минималистский, но я уверен, что есть много лучших альтернатив.