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-prohttps://github.com/ant-design...，該有的都已經幫你搭好了，如果你也想開發後臺管理的系統。

別忘了關注我 mike啥都想搞

還有其他後端技術分享在我的公衆號。