React框架Umi实战(3)路由进阶

前面的课程都是使用的约定路由，就是自动生成的，但是我们做项目大部分都是涉及权限控制的，这时就还是得用控制路由，仅今天就来改进一下

1 修改配置 .umirc.js

// ref: https://umijs.org/config/
export default {
  plugins: [
    // ref: https://umijs.org/plugin/umi-plugin-react.html
    ['umi-plugin-react', {
      antd: true,
      dva: true,
      dva: {
          immer: true
        },
      dynamicImport: false,
      title: 'umis',
      dll: false,
      hardSource: false,
      routes: {
        exclude: [
          /model\.(j|t)sx?$/,
          /service\.(j|t)sx?$/,
          /models\//,
          /components\//,
          /services\//,
        ],
      },
    }],
  ],
  routes: [
       {
        path: '/',
        component: '../layouts',
       },
       {
        path: '/users',
        component: '../layouts',
        Routes: ['src/components/Authorized'],
        routes: [
                { path: '/users', component: './users' },
         ],
       },
       {
        path: '/login',
        component: '../layouts',
        routes: [
                { path: '/login', component: './login' },
         ],
       },
       {
        path: '/test',
        component: '../layouts',
        routes: [
                { path: '/test', component: './test' },
         ],
       },
  ]
}

一旦使用了配置路由，那么pages下的文件将不再生成路由。 component 的路径是相对于 src\pages 的。在需要权限控制的的路由下使用 Routes 属性配置。

2 鉴权路由组件 components\Authorized

import React, { Component } from 'react'
import { connect } from 'dva';
import { Router, Route, Redirect, withRouter } from 'dva/router';
import { message } from 'antd';

class AuthRouter extends Component {
    render() {
        const { component: Component, ...rest } = this.props
        const isLogged = false
        if (!isLogged) {
          message.warning('您需要先登陆');
        }
        return (
            <Route {...rest} render={props => {
              return isLogged
                  ? <Component {...props} />
                  : <Redirect to="/login" />
            }} />
        )
      }
}

function mapStateToProps(state) {
 return {
   state
 }
}

// export default ListData;
export default connect(mapStateToProps)(withRouter(AuthRouter));

里面的判断可以根具你自己的业务来写，我这边是跳转到登陆页面。

3 登陆页面

import { connect } from 'dva';
function Login(){
  return (
    <div>
      <h1>this is login page</h1>
    </div>

  )
}

function mapStateToProps(state) {
  console.log(state.login);
  return {
    test:'fhf'
  };
}

export default connect(mapStateToProps)(Login);

这样你访问/users 就会重定向到登陆页面：

4 总结

这样简单的umi使用就结束了，在我看来重点就这么多，大部分还是dva的使用，参考我之前的dva系列学一下就好了。这些框架其实都是比较好上手，关键还是React的基础要掌握好，还有es6的语法。如果你想要直接进入开发，建议不要自己再花时间搭建框架。即使你使用了umi自己按我所写的搭建出来，也没有直接用现成的快。

而且重复造轮子，并没有什么意义。建议直接使用 ant-design-pro https://github.com/ant-design... ，该有的都已经帮你搭好了，如果你也想开发后台管理的系统。

别忘了关注我 mike啥都想搞

还有其他后端技术分享在我的公众号。