admin-on-rest：实现一个带有 link 的登录页面到注册页面

Question

我正在尝试在管理员中实现一个登录页面，并在注册表中输入 link。总的来说，我是反应和前端开发的新手。

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

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

Answer 1

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

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

关于如何 add a login page 和 how to customize the login page.

但这不是一个例子。

Here是登录页面的源代码。如果你真的想复制页面，你可以在 render 方法中添加一个 link 到注册页面。

首先创建一个名为

的文件

login.js

并复制原始登录页面。导入 Link-组件：

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

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

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

在你的

app.js

导入您创建的登录页面：

import Login from './login';

并使用它：

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

编辑：

现在您的登录页面中有一个 "Registration"-Link。

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

创建一个名为

的新文件

MyLayout.js

与

的内容

Layout.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} />
];

和一个名为

的文件

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;

在你的

app.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}>

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

希望这对您有所帮助。 :)

admin-on-rest：实现一个带有 link 的登录页面到注册页面

admin-on-rest: implement a login page with a link to a registration page

reactjs

react-router

admin-on-rest