通过路由配置来实现全局业务管控。如只有登陆之后才能访问各个路由
react & react-router-dom $ mobx $ mobx-react
router.jsx 文件
关键的router文件,写主要场景逻辑
import React from 'react';
import { Route, Redirect ,withRouter } from 'react-router-dom';
import { inject, observer } from 'mobx-react';
import TopicList from '../components/topic-list/index';
import TopicDetail from '../components/topic-detail/index';
import TestApi from '../components/test/api-test';
import Homew from '../components/home/index';
import ListItems from '../components/topic-list/list-item';
import WrappedUserLogin from '../components/user-login/user-login';
const PrivateRoute = ({ isLogin, component: Component, ...rest }) => {
<Route
{...rest}
render={
props => (
isLogin ?
<Component {...props} /> :
<Redirect
to={{
pathname: '/user/login',
search: `?from=${rest.path}`,
}}
/>
)
}
/>
}
const InjectedPriveRoute = withRouter(inject(((stores) => {
return {
login: stores.appState.user.login,
}
}))(observer(PrivateRoute)))
PrivateRoute.prototype = {
isLogin: PropTypes.bool,
component:PropTypes.element.isRequired,
}
PrivateRoute.defaultProps = {
isLogin: false,
}
export default () => [
<Route path="/" render={() => <Redirect to="/homew" />} exact key="home" />,
<Route path="/list" component={TopicList} exact key="list" />,
<Route path="/detail" component={TopicDetail} key="detail" />,
<Route path="/testApi" component={TestApi} key="testApi" />,
<Route path="/homew" component={Homew} key="homew" />,
<InjectedPriveRoute path="/listItems" component={ListItems} key="ListItems"/>,
<Route path="/user/login" component={WrappedUserLogin} key="UserLogin" />,
]
user-login.jsx 文件
import React from 'react';
import { inject, observer } from 'mobx-react';
import { Redirect } from 'react-router-dom';
import querystring from 'query-string';
import { Layout, Breadcrumb, Form, Input, Icon, Checkbox, Button } from 'antd';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom'
import { createHashHistory } from 'history'
import './user-login.css';
const {
Sider, Content,
} = Layout;
const { Item: FormItem } = Form;
const history = createHashHistory();
@inject((stores) => {
return {
userStore: stores.userStore,
}
})
@observer
class UserLogin extends React.Component {
constructor(props) {
super(props);
this.handleLogin = this.handleLogin.bind(this);
this.getFrom = this.getFrom.bind(this);
}
getFrom(location) {
location = location || this.props.location;
const query = querystring.parse(location.search);
return query.from || '/user/info';
}
handleLogin(e, { userName, pwd }) {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
this.props.userStore.login({ userName, pwd })
.then((result) => {
if (result) {
history.push('/homew');
}
}, (error) => {
console.log(error)
})
}
});
}
render() {
const { getFieldDecorator, getFieldsValue } = this.props.form;
const from = this.getFrom();
const isLogin = this.props.userStore.wifLogin;
if (isLogin) {
return <Redirect to={from} />
}
return (
<div>
<Layout>
<Content>
<Breadcrumb>
<Breadcrumb.Item>
<Link to="/homew">
主页
</Link>
</Breadcrumb.Item>
<Breadcrumb.Item>
登陆
</Breadcrumb.Item>
</Breadcrumb>
{}
<Form onSubmit={e => this.handleLogin(e, getFieldsValue())}>
<FormItem>
{getFieldDecorator('userName', {
rules: [{ required: true, message: 'Please input your username!' }],
})(
<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />,
)}
</FormItem>
<FormItem>
{getFieldDecorator('pwd', {
rules: [{ required: true, message: 'Please input your Password!' }],
})(
<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />,
)}
</FormItem>
<FormItem>
{getFieldDecorator('remember', {
valuePropName: 'checked',
initialValue: true,
})(
<Checkbox>Remember me</Checkbox>,
)}
<a className="login-form-forgot" href="">Forgot password</a>
<Button type="primary" htmlType="submit" className="login-form-button">
Log in
</Button>
Or <a href="">register now!</a>
</FormItem>
</Form>
</Content>
<Sider theme="light">
<div id="sidebar">
<div className="panel">
<div className="header">
<span className="col_fade">关于</span>
</div>
<div className="inner">
<p>CNode:Node.js专业中文社区</p>
<p>在这里你可以:</p>
<ul>
<li>向别人提出你遇到的问题</li>
<li>帮助遇到问题的人</li>
<li>分享自己的知识</li>
<li>和其它人一起进步</li>
</ul>
</div>
</div>
</div>
</Sider>
</Layout>
</div>
)
}
}
UserLogin.wrappedComponent.propTypes = {
userStore: PropTypes.object.isRequired,
};
UserLogin.propTypes = {
form: PropTypes.object,
location: PropTypes.object,
};
const WrappedUserLogin = Form.create()(UserLogin);
export default WrappedUserLogin;