React+umi增加路由权限

一、配置路由权限key

在资源文件 config/route.ts配置
只有拥有了HOME（在 src/access.ts 中定义）权限，用户才可以访问该页面。

export const routes =  [
  {
    path: '/home',
    component: '/home',
    access: 'HOME', 	// 权限定义返回值的某个 key
  }
]

二、启用插件 @umijs/plugin-access

@umijs/plugin-access
启用方式： 创建 src/access.ts

const routerDynamic = (initialState: any) => {
  initialState = Array.isArray(initialState) ? initialState :  [];
  let home= {
    HOME: initialState.includes('HOME') || false,
  }
  return {
    ...home,        
  }
};
export default routerDynamic;

三、组件中获取权限

在组件内部获取权限根据权限进行页面展示【*注：useAceess()方法引入】

import React from 'react';
import { useAccess } from 'umi';
const HOME = props => {
  const access = useAccess();
 
  if (access.HOME) {
    return <h1>访问首页成功</h1>;
  }
 
  return <h1>对不起，您没有权限访问访问该页面</h1>;
};
export default HOME;

四、启用插件@umijs/plugin-initial-state动态设置routerDynamic参数

启用方式 创建 src/app.ts文件

// src/app.ts
export async function getInitialState() {
  const data = await fetchXXX();
  data = ['HOME']
  return data;
}

五、刷新动态配置

利用插件 @umijs/plugin-initial-state中 refresh()方法

import { Alert, Checkbox, Select, message } from 'antd';
import React, { useState, useEffect } from 'react';
import { connect, Dispatch, useModel } from 'umi';
interface LoginProps {

}
const Login: React.FC<LoginProps> = (props) => {
  const { refresh  } = useModel('@@initialState');
  
  useEffect(()=>{
    refresh();   //利用该方法重新调用src/app.ts 中 getInitialState刷新数据再次渲染
  }, [])
  
  return (
    <h1>登录成功</h1>
  );
};

export default connect(({ login, loading }: ConnectState) => ({
  userLogin: login,
}))(Login);

六、针对路由排序,icon设置等场景

针对场景：

1. 动态侧边栏路由,
2. 动态侧边栏路由icon,
3. 动态引入项目内资源文件
4. 动态设置router内的所有内容等均可用该方法

【*注:如果用到该场景, ./src/access.ts文件将不再会控制router.ts内的路由权限key】

// ./src/app.ts
export function patchRoutes({ routes }) {
  routes.unshift({
    path: '/new',
    exact: true,
    component: require('./new').default,
  });
}