之前的课程都是使用约定路由，自动生成，但是我们大部分项目都涉及到权限控制，所以还是要使用控制路由。今天只改进1修改configuration.umirc.js//ref:https://umijs.org/config/exportdefault{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',路由:['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下的文件将不再生成路由。组件的路径是相对于src\pages的。在需要权限控制的路由下使用Routes属性配置。2认证路由组件components\AuthorizedimportReact,{Component}from'react'import{connect}from'dva';import{Router,Route,Redirect,withRouter}from'dva/router';import{message}from'antd';classAuthRouterextendsComponent{render(){const{component:Component,...rest}=this.propsconstisLogged=falseif(!isLogged){message.warning('你需要先登录');}return({returnisLogged?:}}/>)}}functionmapStateToProps(state){return{state}}//导出默认ListData；导出默认连接（mapStateToProps）（withRouter（AuthRouter））；里面的判断可以根据自己的业务来写，这里我是跳转到登录页面。3登录页面import{connect}from'dva';functionLogin(){return(

)}functionmapStateToProps(state){console.log(state。登录）;return{test:'fhf'};}exportdefaultconnect(mapStateToProps)(登录);这样当你访问/users时，就会被重定向到登录页面：4总结umi的这个简单使用就结束了，在我的例子中好像有这么多要点，大部分都是dva的使用，只是参考我之前的dva系列学习。这些框架其实都比较好用。关键是要掌握React的基础知识和es6的语法。如果想直接上开发，建议不要花时间自己搭建框架。就算你用umi按照我写的自己搭建，也不能直接用现成的。重新发明轮子没有意义。推荐直接使用ant-design-prohttps://github.com/ant-design...，如果你也想开发后台管理系统，你需要的都已经给你设置好了。别忘了关注我Mike想搞定一切，分享其他后端技术在我的公众号。