umi权限路由_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 (

{

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自己按我所写的搭建出来，也没有直接用现成的快。

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

别忘了关注我 mike啥都想搞

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