123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125 |
- import React, { Component } from 'react';
- import { Router, Route, Switch, Redirect } from 'react-router-dom';
- import { Provider, connect } from 'react-redux';
- import Async from './Async';
- const StoreAsync = connect(state => state)(Async);
- const UserStoreAsync = connect(state => {
- return { user: state.user };
- })(Async);
- export default class App extends Component {
- constructor(props) {
- super(props);
- this.moduleList = [];
- this.moduleMap = {};
- this.init();
- }
- init() {
- const { routes } = this.props;
- for (let i = 0; i < routes.length; i += 1) {
- this.pageRegister(routes[i]);
- }
- }
- pageRegister(config) {
- if (!config.index) return;
- if (!config.module) return;
- if (!this.moduleMap[config.module.key]) {
- this.moduleList.push(config.module.key);
- this.moduleMap[config.module.key] = { groupList: [], groupMap: {}, ...config.module, path: config.path };
- }
- if (!config.group) return;
- if (!this.moduleMap[config.module.key].groupMap[config.group.key] && config.group.key) {
- this.moduleMap[config.module.key].groupList.push(config.group.key);
- this.moduleMap[config.module.key].groupMap[config.group.key] = {
- subList: [],
- subMap: {},
- ...config.group,
- path: config.path,
- };
- }
- if (!this.moduleMap[config.module.key].groupMap[config.group.key].subMap[config.key]) {
- this.moduleMap[config.module.key].groupMap[config.group.key].subList.push(config.key);
- this.moduleMap[config.module.key].groupMap[config.group.key].subMap[config.key] = { ...config };
- }
- }
- render() {
- const { store } = this.props;
- return <Provider store={store}>{this.renderRouter()}</Provider>;
- }
- renderRouter() {
- const { project, routes, store, history } = this.props;
- return (
- <Router history={history}>
- <Switch>
- {project.rootPath && (
- <Route exact path="/">
- <Redirect to={project.rootPath} />
- </Route>
- )}
- {routes.map(route => {
- return (
- <Route
- exact
- key={route.key}
- path={route.matchPath || route.path}
- render={props => {
- if (project.loginAuth && !project.loginAuth(route, store.getState())) {
- return <Redirect to={project.loginPath || '/login'} />;
- }
- if (project.powerAuth && !project.powerAuth(route, store.getState())) {
- return <Redirect to={project.powerPath || '/power'} />;
- }
- return this.renderMode(route, props);
- }}
- />
- );
- })}
- <Route path="*">
- <Redirect to={project.emptyPath || '/empty'} />
- </Route>
- </Switch>
- </Router>
- );
- }
- renderMode(route, props) {
- const { project } = this.props;
- let c;
- if (typeof project.mode === 'function') {
- c = project.mode;
- } else {
- switch (project.mode) {
- case 'admin':
- c = () => import('./Admin');
- break;
- case 'adminLeft':
- c = () => import('./AdminLeft');
- break;
- default:
- return this.renderPage(route, props);
- }
- }
- return (
- <UserStoreAsync
- config={route}
- {...props}
- key={props.location.key}
- moduleList={this.moduleList}
- moduleMap={this.moduleMap}
- project={project}
- component={c}
- >
- {this.renderPage(route, props)}
- </UserStoreAsync>
- );
- }
- renderPage(route, props) {
- return <StoreAsync isForm config={route} {...props} component={() => route.component()} />;
- }
- }
|