如何为不同类型的用户添加子域到 React Web 应用程序？

Question

我们有一个带有 React 前端的 Web 应用程序。我想为第二种类型的用户添加一个子域，其访问权限和功能有限。第二种类型的用户是不同的实体，因此管理“角色”或“权限”不起作用。

此外，对于这个子域，我想创建一个具有有限数量的减速器的不同商店。

这是当前index.js 中的一段代码：

const createStoreWithMiddleware = applyMiddleware(
  LoadingMiddleware,
  ReduxPromise,
  CallbackMiddlware,
  ErrorHandlerMiddleware,
  NotificationMiddlware,
  ReduxThunk
)(createStore)
const store = createStoreWithMiddleware(reducers)

const token = cookie.load('token')
if (token) {
  store.dispatch({type: AUTH_USER})
}

// ========================================

ReactDOM.render(<Provider store={store}>
    <Router history={history}>
      <ScrollToTop/>
      <App/>
    </Router>
    <Alert stack={{limit: 3, spacing: 10}}/>
  </Provider>,
  document.getElementById('root')
)

更新 1：“子域”是指：user.myapp.com 与主域 myapp.com 相比

更新 2：更具体地说，我如何/应该根据子域提供不同的应用程序？

我已经检查了几个教程，但仍然不确定什么是正确的方法。

Answer 1

现在，如果您想要一个子域（如本示例中的情况），具有不同的商店和可能不同的视图，您可以通过多种方式实现。这是一种使用 React 和 Redux 实现解决方案的结构良好的方法：

1. 路由和子域处理 您需要处理基于子域的路由； user.myapp.com 应该被路由。这部分通常涉及服务器端配置，以便请求正确路由到您的 React 应用程序。

配置服务器：确保对 user.myapp.com 的请求传递到与 myapp.com 相同的 React appl，但在应用程序逻辑中按子域进行区分。 2. Redux Shop的配置 因为您希望拥有另一个商店，其中包含用于用户子域的减速器子集：

单独的存储配置：更改现有的 Redux 存储设置以容纳多个存储。您将能够有条件地创建不同的商店并根据子域使用该商店。 以下是修改 index.js 的方法：

import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import { Router } from 'react-router-dom';
import ReactDOM from 'react-dom';
import history from './history'; // Ensure you have history set up for Router
import reducers from './reducers'; // Your combined reducers
import App from './App'; // Your main App component

const createStoreWithMiddleware = applyMiddleware(
  LoadingMiddleware,
  ReduxPromise,
  CallbackMiddlware,
  ErrorHandlerMiddleware,
  NotificationMiddlware,
  ReduxThunk
)(createStore);

// Function to create a store with specific reducers
const createCustomStore = () => {
  // Define reducers specific to the subdomain
  const customReducers = {
    // Add your specific reducers here
    // Example: user: userReducer
  };

  // Create store with custom reducers
  return createStoreWithMiddleware(combineReducers({
    ...reducers, // Your main reducers
    ...customReducers
  }));
};

const token = cookie.load('token');

let store;
if (token) {
  store = createStoreWithMiddleware(reducers);
} else {
  // Create a different store for users without token
  store = createCustomStore();
}

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <ScrollToTop/>
      <App/>
    </Router>
    <Alert stack={{limit: 3, spacing: 10}}/>
  </Provider>,
  document.getElementById('root')
);

3. 基于组件的渲染 您可以根据用户是否位于子域上有条件地渲染 React 组件中的元素或应用程序中的路由。您可以根据应用程序可用的任何其他上下文的 URL 来完成此操作。