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

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 (            
    
      {              return isLogged                  ? 
                       : 
                 }} />        )      }}function mapStateToProps(state) { return {   state }}// export default ListData;export default connect(mapStateToProps)(withRouter(AuthRouter));
    

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

3 登陆页面

import { connect } from 'dva';function Login(){  return (    
    
      
     
this is login page
    
    
  )}function mapStateToProps(state) {  console.log(state.login);  return {    test:'fhf'  };}export default connect(mapStateToProps)(Login);

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

4 总结

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

别忘了关注我 mike啥都想搞

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