umijs——动态路由，设置有页面路由权限时，同级编辑路由也有权限

参考：

1.umijs官网：https://umijs.org/docs/guides/routes

 

1.开启权限配置，umirc.ts：

export default {
  access: {},
  // access 插件依赖 initial State 所以需要同时开启
  initialState: {},
};

2.src目录，新建权限定义文件access.ts，这是约定文件，名称固定。内容如下：

export type InitData = {
  permRouters?: string[]
}

export default (initialState: InitData) => {
  const { permRouters } = initialState
  const allPerms: Record<string, boolean> = {}
  permRouters?.forEach(item => {
    allPerms[item] = true
  })
  return allPerms
}

3.app.tsx，初始化全局变量-路由权限：

import { InitData } from './access'
import Page403 from '@/pages/403'
...
export async function getInitialState(): Promise<InitData> {
  const permRouters: string[] = storage.get('permRouters') || []
  return { permRouters }
}

export const layout: RunTimeLayoutConfig = ({ initialState }) => {
  return {
    unAccessible: createElement(Page403, { key: 'Page403' }),
    ....
  }
}
...

 

4.登录页设置路由权限，login.tsx：

// 登录成功回调  
const handleLoginSuccess= useCallback(
    async (res: {menuList: string[]}) => {
      const { menuList } = res
      storage.set('permRouters', menuList)
      setInitialState(pre => {
        return {
          ...pre,
          permRouters: menuList,
        }
      })
    [setInitialState],
)

5.路由配置：

...  
  {
    name: '任务管理',
    path: '/task',
    component: '@/pages/task',
  },
  {
    path: '/task/:id', // 动态路由
    component: 'task/$id', // 对应 pages/task/$id.tsx
    wrappers: ['@/wrappers/auth'],
  },
...

目录层级：

6.wrappers文件夹下新建auth.tsx文件，内容如下：

import { useModel, Navigate, Outlet } from '@umijs/max'

export default (props: any) => {
  const { initialState } = useModel('@@initialState')
  const { permRouters } = initialState || {}

  // 检查是否有任务管理权限
  if (!permRouters?.includes('/task')) {
    return <Navigate to='/403' />
  }
  // Outlet——用于渲染父路由中渲染子路由。如果父路由被严格匹配，会渲染子路由中的 index 路由（如有）。
  return <Outlet />
}