umi运行时配置

umi约定，src/app.js或 src/app.tsx文件为运行时配置，运行时配置和配置的区别是他跑在浏览器端，无需引用他们，应用启动时执行。其实就是几个封装好的函数，使用他们可以做特定的事情，不可以自定义函数

+ src
  - app.js      # 运行时配置文件
- package.json

运行时配置，是在浏览器运行时的配置，因此这个配置文件不能引入node依赖包（node依赖包是前端发布时引用的，运行时配置不参与发布）。

主要有以下几个函数

• onRouteChange 监听路由改变
• getInitialState 初始化状态
• render 重新渲染
• patchRoutes 修改路由
• modifyRouteProps 修改传给路由组件的 props
• rootContainer 用于封装 root container

• onRouteChange({ routes, matchedRoutes, location, action })

在初始加载和路由切换时做一些事情。比如用于做埋点统计

export function onRouteChange({ location, routes, action }) {

     bacon(location.pathname);

}

做登录拦截

监听路由改变
一个参数：路由对象
import { history } from 'umi'

export function onRouteChange({ location, routes }) {
    const nowPath = routes[0].routes.filter(item => item.path === location.pathname)
    const isLogin = localStorage.getItem('username')

    //如果数组有值，有auth属性，并且没有登陆，就让它跳转到login页，并且附带跳转参数
    if (nowPath.length === 1 && nowPath[0].auth && !isLogin) {
        history.push({
            pathname: '/login',
            query: {
                form: location.pathname
            }
        })
    }
}

• patchRoutes({ routes })

修改路由。比如在最前面添加一个 /foo 路由

export function patchRoutes({ routes }) {

     routes.unshift({

     path: '/foo',

     exact: true,

     component: require('@/extraRoutes/foo').default,

 });

}

比如和 render 配置配合使用，请求服务端根据响应动态更新路由，注意：直接修改routes，不需要返回

let extraRoutes;

export function patchRoutes({ routes }) {

 merge(routes, extraRoutes);

}

export function render(oldRender) {

 fetch('/api/routes').then(res=>res.json()).then((res) => { 

     extraRoutes = res.routes;

     oldRender();

 })

}

• render(oldRender: Function)、

覆写 render。比如用于渲染之前做权限校验

import { history } from 'umi';

export function render(oldRender) {

 fetch('/api/auth').then(auth => {

     if (auth.isLogin) { oldRender() }

     else { 

         history.push('/login'); 

         oldRender()

     }

 });

}

• modifyRouteProps(props, { route })

修改传给路由组件的 props。

export function modifyRouteProps(props, { route }) {
  return { ...props, foo: 'bar' };
}

• rootContainer(container)

用于封装 root container，可以取一部分，或者外面套一层，等等。比如dva、intl 等需要在外层有个 Provider 的场景

export function rootContainer(container) {
  const DvaContainer = require('@tmp/DvaContainer').default;
  return React.createElement(DvaContainer, null, container);
}