==登錄==
使用redux做狀態(tài)管理,設置登錄的 reducer
loginReducer.js
const loginRedirectPath = (state={toPath:""})=>{
return state
}
export default loginRedirectPath
store.js
import {createStore, combineReducers} from "redux";
import loginReducer from "./reducer/loginReducer";
const reducers = combineReducers({
loginState: loginReducer
})
const store = createStore(reducers);
export default store
登錄頁：
import React, {Component} from "react";
import {withRouter, NavLink} from "react-router-dom";
import {connect} from "react-redux";
import {Form, Icon, Input, Button,} from "antd";
import "./index.css";
const FormItem = Form.Item;
class LoginFrom extends Component {
handleSubmit(e) {
console.log(e)
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log(values)
}
})
}
render() {
const {getFieldDecorator} = this.props.form;
return (
<Form onSubmit={this.handleSubmit.bind(this)} className="login-form" id="login-form">
{/* 用戶名 */}
<FormItem>
{getFieldDecorator('username', {
rules: [{required: true, message: "請輸入用戶名"}],
})(
<Input prefix={<Icon type="user" style={{color: "rgba(0,0,0,0.25)"}}/>} placeholder="用戶名"/>
)}
</FormItem>
{/* 密碼 */}
<FormItem>
{
getFieldDecorator('password', {
rules: [{required: true, message: "請輸入密碼"}],
})(
<Input prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,0.25)'}}/>} type="password"
placeholder="密碼"/>
)
}
</FormItem>
{/* 復選框 */}
<FormItem>
<span><NavLink to="/reset">忘記密碼</NavLink></span>
<Button type="primary" htmlType="submit" className="login-form-button"
loading={this.isLogging ? true : false}>
{this.isLogging ? "Loading" : "登錄"}
</Button>
</FormItem>
</Form>
)
}
}
const WrappedMormalLoginFrom = Form.create()(LoginFrom);
const loginState = ({loginState}) => ({toPath: loginState.toPath})
export default withRouter(connect(loginState)(WrappedMormalLoginFrom))
登錄狀態(tài)
AuthorizedRoute.js
import React, {Component} from "react";
import {Route,Redirect} from "react-router-dom";
class AuthorizedRoute extends Component {
render() {
const {component:Component} = this.props;
const isLogged = true;//默認是已經(jīng)登錄狀態(tài)
return (
<Route render={
props=>{
return isLogged ? <Component {...props} /> : <Redirect to="/login" />
}
} />
)
}
}
export default AuthorizedRoute
路由
router.js
import React from "react";
import {Switch, Route, Redirect, HashRouter} from "react-router-dom";
import asyncComponent from "../component/asyncComponent";
import AuthorizedRoute from "./AuthorizedRoute";
const Home = asyncComponent(() => import("../pages/home/"));
const Login = asyncComponent(() => import("../pages/login/"));
export const Router = () => (
<HashRouter>
<Switch>
<Route path="/home" component={Home}/>
<Route path="/login" component={Login}/>
<AuthorizedRoute path="/" component={Home}/>
<Redirect from="/" exact to="/login"/>
</Switch>
</HashRouter>
)
創(chuàng)建左側菜單以及用戶權限
menuList.js
import React, {Component} from "react";
import {NavLink} from "react-router-dom";
import {Menu, Icon} from "antd";
import config from "../utils/menu";
const SubMenu = Menu.SubMenu;
class MenuList extends Component {
constructor(props) {
super(props)
this.state = {}
}
/**
* 創(chuàng)建菜單
* @param menu
*/
createMenu(menu) {
const childMenuData = menu.children;
let childMenu = <div className="list-ul"></div>;
if (childMenuData && childMenuData.length) {
childMenu = childMenuData.map((item) => {
return this.createMenu(item)
});
return <SubMenu key={menu.id} title={<span>
<Icon type={menu.icon}/>
{menu.title}
</span>}>
{childMenu}
</SubMenu>
} else {
return <Menu.Item key={menu.id}><NavLink to={menu.url}><Icon
type={menu.icon}/>{menu.title}</NavLink></Menu.Item>
}
}
render(){
return <div>
<Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]} style={{height:"100%",borderRight:0}}>
{
config.map((item)=>{
console.log(item);
return this.createMenu(item)
})
}
</Menu>
</div>
}
}
export default MenuList
menu.js:
const menus = [
{
id: 1,
title: "用戶管理",
icon: "bank",
url: "",
children: [{
id: 2,
title: "忠實用戶",
url: "/user",
}, {
id: 3,
title: "一般用戶",
url: "/InviteList",
}]
},
{
id: 4,
title: "文章管理",
icon: "bank",
children: [{
id: 5,
title: "標簽",
url: "/purchaseCertificate",
}]
}
]
export default menus
首頁
import React, {Component} from "react";
import {withRouter} from "react-router-dom";
import {Icon, Layout, Modal} from 'antd';
import Content from "../../reducer";
import CreateMenuList from "../../component/menuList";
import "./index.css";
const {Header, Sider} = Layout;
class Home extends Component {
logout() {
const {dispatch} = this.props;
//退出登錄逢唤，
Modal.confirm({
content: "確定要退出嗎？",
cancelText: "取消",
okText: "確定",
onOk: (values) => {
console.log(values);
this.props.history.push("/login");
return new Promise((res, rej) => {
dispatch({
payload: values
})
}).catch((e) => console.warn(e))
}
})
}
render() {
return <Layout>
<Header className="header">
<span>后臺管理系統(tǒng)</span>
<span><span>管理員</span><Icon type="logout" onClick={this.logout.bind(this)}/></span>
</Header>
<Layout>
<Sider width={200}>
<CreateMenuList/>
</Sider>
<Layout><Content/></Layout>
</Layout>
</Layout>
}
}
export default withRouter(Home)
右側內(nèi)容區(qū)域：
import React, {Component} from "react";
import {Switch, Route} from "react-router-dom";
import asyncComponent from "../component/asyncComponent";
const Demo = asyncComponent(() => import("../component/demo"));
class Routers extends Component {
render() {
return <Switch>
<Route path="/user" component={Demo}/>
<Route path="/" component={Demo}/>
</Switch>
}
}
export default Routers
右側組件內(nèi)容：
import React, {Component} from "react";
class Demo extends Component {
render() {
return <div >右側內(nèi)容組件</div>
}
}
export default Demo
按需異步加載組件
asyncComponent.jsx
/**
* 按需異步加載組件
*/
import React, {Component} from "react";
export default function asyncComponent(importComponent) {
class AsyncComponent extends Component{
constructor(props){
super(props)
this.state={
component:null
}
}
async componentDidMount(){
const {default:component} = await importComponent();
this.setState({
component:component
})
}
render(){
const Component = this.state.component
return Component ? <Component {...this.props} /> : null
}
}
return AsyncComponent
}
