reactjs - admin-on-rest：实现登录页面，其中包含指向注册页面的链接

Question

我正在尝试在 admin 中实现一个登录页面，并带有一个注册表单的链接。总的来说，我是反应和前端开发的新手。

我在rest demo上复制了管理员的登录页面，但我不知道如何在底部添加链接。我尝试从 react-router 添加一个组件，但我不断收到各种错误。有什么我可以效仿的例子吗？

编辑：我正在尝试使用自定义路由添加注册页面，但该页面显示在管理 UI 中。这是它的样子：

Answer 1

admin-on-rest 是一个前端框架，但它也是您可以在自己的应用程序中使用/集成的一堆组件。

了解 react 如何与 admin-on-rest 一起工作很重要。Afaik 你必须了解 redux、redux-form、react-router 和 redux-saga。

有一个简短的描述如何添加登录页面以及 如何自定义登录页面。

但这不是一个例子。

这是登录页面的源代码。如果你真的想复制页面，你可以在 render 方法中添加一个指向注册页面的链接。

首先创建一个名为

登录.js

并复制原来的登录页面。导入链接组件：

import { Link } from 'react-router-dom';

然后在某处使用链接，例如在 </form>和之间</Card>（在第 106 行和第 107 行之间）。

<Link to={{pathname: "/register"}} >Registration</Link>

在你的

应用程序.js

导入您创建的登录页面：

import Login from './login';

并使用它：

<Admin loginPage={Login} authClient={authClient} restClient={jsonServerRestClient('http://jsonplaceholder.typicode.com')}>

编辑：

现在您的登录页面中有一个“注册”链接。

现在，是时候创建注册页面了。我不是 admin-on-rest 专家，但我认为 admin-on-rest 的想法是始终显示菜单并检查授权。我认为大多数管理应用程序都没有注册页面，该页面必须对未登录的用户可见，并且他们不应该看到左侧的菜单。它类似于登录页面。因此，您必须使用自定义布局创建到自定义页面（无需授权检查）的自定义路由。

创建一个名为的新文件

MyLayout.js

内容为

布局.js

并删除线条

injectTapEventPlugin()

和

<Sidebar>
  {menu}
</Sidebar>

隐藏左侧的菜单。

然后创建一个名为

customRoutes.js

内容如下：

import React from 'react';
import { Route } from 'react-router-dom';
import Register from './Register';

export default [
    <Route exact path="/register" component={Register} />
];

和一个名为

注册.js

和

import React from 'react';
import { Card, CardText } from 'material-ui/Card';
import { ViewTitle } from 'admin-on-rest';

const Register = () => (
    <Card>
        <ViewTitle title="Register" />
        <CardText>             
            <div>This is the register page.</div>
        </CardText>
    </Card>
);

export default Register;

在你的

应用程序.js：

import MyLayout from './MyLayout';
import customRoutes from './customRoutes';
import MyLayout from './MyLayout';
import authClient from './authClient';


<Admin appLayout={MyLayout} loginPage={Login} authClient={authClient} customRoutes={customRoutes} restClient={myApiRestClient}>

这只是一个（丑陋的）例子。

希望这可以帮助。:)