admin-on-rest:实现一个登录页面,其中包含指向注册页面的链接

Question

我正在尝试在管理员休息时使用注册表单的链接实现登录页面.我是反应和前端发展的新手.

我从管理员休息演示中复制了登录页面,但我无法弄清楚如何在底部添加链接.我尝试从react-router添加一个组件,但我不断收到各种错误.我可以效仿任何一个例子吗？

编辑:我试图添加一个自定义路由的注册页面,但页面显示在管理UI中.这就是它的样子:

Answer 1

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

了解反应如何与静止管理一起工作非常重要.Afaik你必须知道redux,redux-form,react-router和redux-saga.

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

但这不是一个例子.

这是登录页面的源代码.如果您确实要复制页面,可以在render方法中添加指向注册页面的链接.

首先创建一个名为的文件

login.js

并复制原始登录页面.导入链接组件:

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')}>

编辑:

现在,您在"登录"页面中有一个"注册"链接.

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

创建一个名为的新文件

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

这只是一个(丑陋的)例子.

希望这可以帮助.:)