前面的课程都是使用的约定路由，就是自动生成的，但是我们做项目大部分都是涉及权限控制的，这时就还是得用控制路由，仅今天就来改进一下
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-prohttps://github.com/ant-design…，该有的都已经帮你搭好了，如果你也想开发后台管理的系统。
别忘了关注我 mike 啥都想搞
还有其他后端技术分享在我的公众号。