• НОВОСТИ
• СТАТЬИ
• БЛОГИ
  за неделю неделю назад 2 недели назад за месяц
• ФАЙЛЫ
• ПРЕСС-РЕЛИЗЫ

"workspaces": [
    "packages/*"
  ],

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

const deps = require('./package.json').dependencies;
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  // Остальная конфигурация Webpack, не связанная непосредственно с Module Federation
  // ...

  plugins: [
    // Плагин Module Federation для интеграции микрофронтендов
    new ModuleFederationPlugin({
      remotes: {
        // Определение удаленных микрофронтендов, доступных для этого микрофронтенда
        'remote-modules-transactions': isProduction
          ? 'remoteModulesTransactions@https://microfrontend.fancy-app.site/apps/transactions/remoteEntry.js'
          : 'remoteModulesTransactions@http://localhost:3003/remoteEntry.js',
        'remote-modules-cards': isProduction
          ? 'remoteModulesCards@https://microfrontend.fancy-app.site/apps/cards/remoteEntry.js'
          : 'remoteModulesCards@http://localhost:3001/remoteEntry.js',
      },
      shared: {
        // Определение общих зависимостей между разными микрофронтендами
        react: { singleton: true, requiredVersion: deps.react },
        antd: { singleton: true, requiredVersion: deps['antd'] },
        'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
        'react-redux': { singleton: true, requiredVersion: deps['react-redux'] },
        axios: { singleton: true, requiredVersion: deps['axios'] },
      },
    }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'index.html'), // Шаблон HTML для Webpack
    }),
  ],

  // Другие настройки Webpack
  // ...
};

const path = require('path');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const deps = require('./package.json').dependencies;

module.exports = {
  // Остальная конфигурация Webpack...

  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'index.html'), // Шаблон HTML для Webpack
    }),
    // Конфигурация Module Federation Plugin
    new ModuleFederationPlugin({
      name: 'remoteModulesCards', // Имя микрофронтенда
      filename: 'remoteEntry.js', // Имя файла, который будет служить точкой входа для микрофронтенда
      exposes: {
        './Cards': './src/root', // Определяет, какие модули и компоненты будут доступны для других микрофронтендов
      },
      shared: {
        // Определение зависимостей, которые будут использоваться как общие между различными микрофронтендами
        react: { requiredVersion: deps.react, singleton: true },
        antd: { singleton: true, requiredVersion: deps['antd'] },
        'react-dom': { requiredVersion: deps['react-dom'], singleton: true },
        'react-redux': { singleton: true, requiredVersion: deps['react-redux'] },
        axios: { singleton: true, requiredVersion: deps['axios'] },
      },
    }),
  ],

  // Другие настройки Webpack...
};

import React, { Suspense, useEffect } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { Main } from '../pages/Main';
import { MainLayout } from '@host/layouts/MainLayout';

// Ленивая загрузка компонентов Cards и Transactions из удаленных модулей
const Cards = React.lazy(() => import('remote-modules-cards/Cards'));
const Transactions = React.lazy(() => import('remote-modules-transactions/Transactions'));

const Pages = () => {
  return (
    
		   
          {/* Использование Suspense для управления состоянием загрузки асинхронных компонентов */}
          Loading...

Далее для команды «Банковские карты» настроим Redux Toolkit

Структура Redux «Банковские карты»

// Импортируем функцию configureStore из библиотеки Redux Toolkit
import { configureStore } from '@reduxjs/toolkit';

// Импортируем корневой редьюсер
import rootReducer from './features';

// Создаем хранилище с помощью функции configureStore
const store = configureStore({
  // Устанавливаем корневой редьюсер
  reducer: rootReducer,
  // Устанавливаем промежуточное ПО по умолчанию
  middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
});

// Экспортируем хранилище
export default store;

// Определяем типы для диспетчера и состояния приложения
export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType;

// Импортируем React
import React from 'react';

// Импортируем главный компонент приложения
import App from '../app/App';

// Импортируем Provider из react-redux для связи React и Redux
import { Provider } from 'react-redux';

// Импортируем наше хранилище Redux
import store from '@modules/cards/store/store';

// Создаем главный компонент Index
const Index = (): JSX.Element => {
  return (
    // Оборачиваем наше приложение в Provider, передавая в него наше хранилище
    
      
    
  );
};

// Экспортируем главный компонент
export default Index;

В приложении должна быть система ролей

Cистема ролей веб-приложения

• USER — может просматривать страницы,

• MANAGER — имеет права на редактирование,

• ADMIN — может редактировать и удалять данные.

Host-приложение отправляет запрос на сервер для получения информации о пользователе и сохраняет эти данные в своем хранилище. Необходимо изолированно получить эти данные в приложении «Банковские карты».

Для этого нужно написать middleware для Redux-стора host-приложения, чтобы сохранять данные в глобальный объект window

// Импортируем функцию configureStore и тип Middleware из библиотеки Redux Toolkit
import { configureStore, Middleware } from '@reduxjs/toolkit';

// Импортируем корневой редьюсер и тип RootState
import rootReducer, { RootState } from './features';

// Создаем промежуточное ПО, которое сохраняет состояние приложения в глобальном объекте window
const windowStateMiddleware: Middleware<{}, RootState> =
  (store) => (next) => (action) => {
    const result = next(action);
    (window as any).host = store.getState();
    return result;
  };

// Функция для загрузки состояния из глобального объекта window
const loadFromWindow = (): RootState | undefined => {
  try {
    const hostState = (window as any).host;
    if (hostState === null) return undefined;
    return hostState;
  } catch (e) {
    console.warn('Error loading state from window:', e);
    return undefined;
  }
};

// Создаем хранилище с помощью функции configureStore
const store = configureStore({
  // Устанавливаем корневой редьюсер
  reducer: rootReducer,
  // Добавляем промежуточное ПО, которое сохраняет состояние в window
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(windowStateMiddleware),
  // Загружаем предварительное состояние из window
  preloadedState: loadFromWindow(),
});

// Экспортируем хранилище
export default store;

// Определяем тип для диспетчера
export type AppDispatch = typeof store.dispatch;

Вынесем константы в модуль shared

Общие компоненты

export const USER_ROLE = () => {
  return window.host.common.user.role;
};

Для синхронизации изменения роли пользователя между всеми микрофронтендами мы задействуем event bus. В модуле shared реализуем обработчики для отправки и приёма событий.

// Импортируем каналы событий и типы ролей
import { Channels } from '@/events/const/channels';
import { EnumRole } from '@/types';

// Объявляем переменную для обработчика событий
let eventHandler: ((event: Event) => void) | null = null;

// Функция для обработки изменения роли пользователя
export const onChangeUserRole = (cb: (role: EnumRole) => void): void => {
  // Создаем обработчик событий
  eventHandler = (event: Event) => {
    // Приводим событие к типу CustomEvent
    const customEvent = event as CustomEvent<{ role: EnumRole }>;
    // Если в событии есть детали, выводим их в консоль и вызываем callback-функцию
    if (customEvent.detail) {
      console.log(`On ${Channels.changeUserRole} - ${customEvent.detail.role}`);
      cb(customEvent.detail.role);
    }
  };

  // Добавляем обработчик событий на глобальный объект window
  window.addEventListener(Channels.changeUserRole, eventHandler);
};

// Функция для остановки прослушивания изменения роли пользователя
export const stopListeningToUserRoleChange = (): void => {
  // Если обработчик событий существует, удаляем его и обнуляем переменную
  if (eventHandler) {
    window.removeEventListener(Channels.changeUserRole, eventHandler);
    eventHandler = null;
  }
};

// Функция для отправки события об изменении роли пользователя
export const emitChangeUserRole = (newRole: EnumRole): void => {
  // Выводим в консоль информацию о событии
  console.log(`Emit ${Channels.changeUserRole} - ${newRole}`);
  // Создаем новое событие
  const event = new CustomEvent(Channels.changeUserRole, {
    detail: { role: newRole },
  });
  // Отправляем событие
  window.dispatchEvent(event);
};

Для реализации страницы редактирования банковской карты, на которой учтены роли пользователей, мы начнем с установления механизма подписки на событие обновления роли. Это позволит странице реагировать на изменения и адаптировать доступные функции редактирования в соответствии с текущей ролью пользователя.

import React, { useEffect, useState } from 'react';
import { Button, Card, List, Modal, notification } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { getCardDetails } from '@modules/cards/store/features/cards/slice';
import { AppDispatch } from '@modules/cards/store/store';
import { userCardsDetailsSelector } from '@modules/cards/store/features/cards/selectors';
import { Transaction } from '@modules/cards/types';
import { events, variables, types } from 'shared';
const { EnumRole } = types;
const { USER_ROLE } = variables;
const { onChangeUserRole, stopListeningToUserRoleChange } = events;

export const CardDetail = () => {
  // Использование Redux для диспетчеризации и получения состояния
  const dispatch: AppDispatch = useDispatch();
  const cardDetails = useSelector(userCardsDetailsSelector);

  // Локальное состояние для роли пользователя и видимости модального окна
  const [role, setRole] = useState(USER_ROLE);
  const [isModalVisible, setIsModalVisible] = useState(false);

  // Эффект для загрузки деталей карты при монтировании компонента
  useEffect(() => {
    const load = async () => {
      await dispatch(getCardDetails('1'));
    };
    load();
  }, []);

  // Функции для управления модальным окном
  const showEditModal = () => {
    setIsModalVisible(true);
  };

  const handleEdit = () => {
    setIsModalVisible(false);
  };

  const handleDelete = () => {
    // Отображение уведомления об удалении
    notification.open({
      message: 'Card delete',
      description: 'Card delete success.',
      onClick: () => {
        console.log('Notification Clicked!');
      },
    });
  };

  // Эффект для подписки и отписки от событий изменения роли пользователя
  useEffect(() => {
    onChangeUserRole(setRole);
    return stopListeningToUserRoleChange;
  }, []);

  // Условный рендеринг, если детали карты не загружены
  if (!cardDetails) {
    return 
loading...
;
  }

  // Функция для определения действий на основе роли пользователя
  const getActions = () => {
    switch (role) {
      case EnumRole.admin:
        return [
          
            Edit
          ,
          
            Delete
          ,
        ];
      case EnumRole.manager:
        return [
          
            Edit
          ,
        ];
      default:
        return [];
    }
  };

  // Рендеринг компонента Card с деталями карты и действиями
  return (
    <>
      
        {/* Отображение различных атрибутов карты */}
        
PAN: {cardDetails.pan}
        
Expiry: {cardDetails.expiry}
        
Card Type: {cardDetails.cardType}
        
Issuing Bank: {cardDetails.issuingBank}
        
Credit Limit: {cardDetails.creditLimit}
        
Available Balance: {cardDetails.availableBalance}
        {/* Список последних транзакций */}
        Recent Transactions