umi max4.4.3菜单权限控制

1、判断登录：

在src目录下新建文件wrappers/auth.ts 在src/access.ts中控制菜单权限

auth.ts文件代码

// src/wrappers/auth.ts
import { getToken } from '@/utils/auth';
import { matchRoutes, Navigate, Outlet, useAppData, useLocation } from 'umi';

export default function Auth(props: any) {
  //判断是否有token
  const isLogin = getToken();
  //如果token存在就返回正常内容
  if (isLogin) {
    return <Outlet />;
  } else {
    //如果不存在token就重定向到登录页
    console.log('跳登录');
    return <Navigate to="/login" />;
  }
}

access.ts文件代码

// src/access.ts
export default function (initialState) {
  return {
    RolePage: authorizedMenus.includes('/role') //此处根据后端返回的权限列表authorizedMenus判断是否含有RolePage  
  };
}

.umirc.ts文件内配置路由 使用access 和wrappers

{
      name: '角色管理',
      access: 'RolePage',
      path: '/role',
      component: './role',
      icon: 'CrownOutlined',
      wrappers: ['@/wrappers/auth'],
    },