如何使用 react js 实现管理模板？答案

【问题标题】：How to implement an admin template with react js?如何使用 react js 实现管理模板？
【发布时间】：2020-07-17 12:21:21
【问题描述】：

我正在使用 reactjs 构建一个在线课程平台。我使用 firebase 作为存储、数据库、身份验证和托管。我想使用 react-admin-firebase 创建一个管理页面。我的问题是我应该为管理面板创建一个单独的应用程序，我应该在哪里托管它，或者我应该将它包含在原始应用程序的文件夹结构中，如果是这样，我应该如何组织我的原始应用程序的文件夹结构。这是我的第一个网站，因此任何有关此的信息将不胜感激！

谢谢

【问题讨论】：

您应该以您编写的代码的形式添加您的研究

标签： reactjs firebase admin react-admin

【解决方案1】：

只是为了让答案更清楚......

您可以有子文件夹来保存所有与管理相关的页面和组件：

├── components
    ├── global
    │   └── Navbar.tsx
    │   └── Footer.tsx
    ├── main
    │    ...
    │   └── Home.tsx
    │   └── About.tsx
    │   └── Login.tsx
    │   └── Register.tsx
    │    ...
    ├── admin
    │   └── Dashboard.tsx
    │   └── Manage.tsx
    │    ...
    │   └── Settings.tsx

在您的组件中，您定义 ProtectedRoute 组件

...
export default const ProtectedRoute = ({ path: Path, component: Component, ...rest }) => (
  <Route
    path={Path}
    render={props =>
    //Custom login check to be implemented by you
      logggedIn ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);

那么无论你定义你的路线，我假设App.tsx

<Route exact path="/" render={props => <Main {...props} />} />
<ProtectedRoute path="/admin" component={admin} />

【讨论】：

由于我使用的是 firebase 身份验证，我是否需要为管理员提供受保护的路由，或者我可以在管理组件中使用 firebaseauth 来检查登录的用户是否是管理员，如果不是则重定向他们返回首页？
Reactjs 使用自己的路由，最好在一个组件中编写您的登录验证逻辑，正如您所建议的，在受保护的路由中；否则，您必须在每个管理组件（或页面）中编写登录验证逻辑。您可以实施 firebase 身份验证或您选择的任何其他 api 身份验证方法。

【解决方案2】：

在 Reactjs 中，您可以创建可重用的 UI 组件。把你的相关组件放在他们的目录下，只是一个建议，你可以按照你想要的方式安排。在项目中的任何地方，您都可以使用 import 语句导入组件并使用这些组件。 对于 ADMIN 面板只需指定一个 PROTECTED 路由，经过身份验证和授权后，管理员用户可以访问与管理员相关的页面。

【讨论】：