umi路由懒加载和权限验证（基于React）

一、路由懒加载

在 umirc.ts 配置文件中，添加以下配置即可：

{
    dynamicImport: {
        loading: '@/components/Loading',
    },
}

其中，@/components/Loading 是我们自己创建的 loading 组件的路径。

二、路由权限验证

首先，在配置路由时，需要配置以下属性：

{
    // 关注
    path: '/friend', component: '@/pages/friend',
    // 模拟导航守卫
    wrappers: ['@/components/Auth']
},

然后，在 wrappers 属性对应的组件中，可以对用户的登录状态进行判断：

import React, { useEffect } from 'react';
import { history } from 'umi';
export default function Auth(props) {
    useEffect(() => {
        const token = localStorage.token;
        if (!token) {
            // 没有 token
            history.push('/login')
        }
    }, [])
    return <div>{props.children}</div>;
}