前の課程はすべて使う約束のルートで、自動的に生成したので、しかし私達のプロジェクトの大部分はすべて権限の制御に関連して、この時やはり制御のルートを使わなければならなくて、今日だけ改善に来ます
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の基礎を身につけることです.es 6の文法もあります.直接開発に入りたい場合は、自分でフレームワークを構築するのに時間をかけないことをお勧めします.umiを使って自分で書いたように作っても、直接既成の速さではありません.しかも車輪を繰り返すのは、何の意味もありません.ant-design-proを直接使用することを推奨https://github.com/ant-design...ああ、あるべきものはもう手伝ってあげました.もしあなたもバックグラウンド管理のシステムを開発したいなら.
私に注目するのを忘れないで
他のバックエンドテクノロジーは私の公衆番号を共有しています.