Umi 中access 字段的核心作用在 Umi Pro（基于 Umi 框架的企业级中后台项目）中，路由配置中的 acc

在 Umi Pro（基于 Umi 框架的企业级中后台项目）中，路由配置中的 access 字段是权限控制的核心字段，其作用是通过定义权限标识符，限制用户对特定路由的访问权限。以下是具体解析：

一、`access` 字段的核心作用

路由权限校验
在路由配置中为某个路由添加 access 属性（如 access: 'canReadPageA'），表示访问该路由需要用户具备对应的权限标识。当用户尝试访问该路由时，Umi 的权限插件（如 @umijs/plugin-access）会结合用户权限列表进行校验：
• 若用户拥有该权限（即权限值为 true），则正常渲染页面；

• 若无权限，则默认跳转至 403 页面或隐藏该路由。
与权限系统联动
access 字段的值需与权限系统定义的权限编码一致。例如：
```
// 路由配置
export default [
  {
    path: '/dashboard',
    component: 'Dashboard',
    access: 'canViewDashboard', // 权限编码
  },
];
```
权限系统需提供类似 canViewDashboard 的布尔值，表示用户是否有权访问该路由。

二、`access` 的典型使用场景

菜单权限控制
结合 @umijs/plugin-layout 插件，Umi 会根据路由的 access 字段自动生成侧边栏菜单。若用户无权限访问某路由，其对应的菜单项会被隐藏。

动态路由加载
在动态路由场景中（如从接口获取路由配置），可通过 access 字段动态控制用户可见的页面。例如：

// 从接口获取路由后添加权限标识
const dynamicRoutes = apiRoutes.map(route => ({
  ...route,
  access: route.permissionCode, // 关联权限系统
}));

按钮级权限控制
在页面组件中，可通过 useAccess 钩子获取权限状态，控制按钮的显示与隐藏：

import { useAccess } from 'umi';
const access = useAccess();
return <Button disabled={!access.canEdit}>编辑</Button>;

三、配置注意事项

权限标识的格式
access 的值需与权限系统定义的编码完全一致，通常为字符串（如 'canReadUser'）。若未定义或未匹配到权限，Umi 默认视为无权限。
与 wrappers 的区别
• access 是权限校验，依赖外部权限系统；

• wrappers 是路由高阶组件，用于本地逻辑校验（如登录状态），不依赖权限编码。
默认行为
若未配置 access，则路由默认对所有用户开放；若配置为 false，则直接禁止访问。

四、完整实现流程示例

安装插件

npm install @umijs/plugin-access @umijs/plugin-layout

配置权限 SDK
在 src/app.ts 中获取用户权限并注入全局状态：

export async function getInitialState() {
  const { permissionList } = await fetchUserPermissions();
  return { permissionList };
}

定义权限规则
在 src/access.ts 中关联权限编码：

typescript
复制
export default (initialState) => {
  const { permissionList } = initialState;
  return permissionList.reduce((acc, item) => {
    acc[item.code] = true;
    return acc;
  }, {});
};

路由配置
在 config/routes.ts 中添加 access 字段：

export default [
  {
    path: '/user',
    component: 'UserList',
    access: 'canViewUserList', // 需权限校验
  },
];

五、扩展功能

• 自定义 403 页面：在 src/pages/403.tsx 中自定义无权限提示。

• 动态路由权限：通过接口动态加载路由时，结合 access 字段实现按需渲染。

• 细粒度控制：可对同一页面内的子路由或组件单独设置权限（如隐藏编辑按钮）。

通过 access 字段，Umi 实现了从路由访问控制到页面内容渲染的全链路权限管理，是中后台项目权限体系的核心组成部分。

Umi 中access 字段的核心作用

一、access 字段的核心作用

二、access 的典型使用场景

三、配置注意事项

四、完整实现流程示例

五、扩展功能

一、`access` 字段的核心作用

二、`access` 的典型使用场景