umi权限路由_umi 入门之项目配置

在 Umi 中配置路由权限需要以下步骤：

1. 安装依赖

首先需要安装 `@umijs/plugin-access` 插件，该插件提供了路由权限控制的功能。

npm install @umijs/plugin-access --save-dev

2. 配置插件

在 `.umirc.js` 或 `config/config.js` 文件中添加插件配置：

export default {
  plugins: [
    ['@umijs/plugin-access', {
      access: 'src/access.js',
    }],
  ],
};

3. 编写权限控制文件

在 `src` 目录下创建 `access.js` 文件，该文件用于定义路由权限控制规则。

export default function access(initialState) {
  const { currentUser } = initialState || {};
  return {
    canReadPage1: currentUser && currentUser.role === 'admin',
    canReadPage2: currentUser && currentUser.role === 'user',
  };
}

`access.js` 文件需要导出一个函数，并接受一个参数 `initialState`，该参数包含了当前用户的信息等状态。函数需要返回一个对象，对象中定义了每个路由的访问权限。

在上面的例子中，我们定义了两个权限：`canReadPage1` 和 `canReadPage2`，分别表示访问页面1和页面2的权限。如果用户拥有相应的权限，即 `currentUser.role` 等于 `admin` 或 `user`，则返回 `true`，否则返回 `false`。

4. 配置路由

在路由配置中使用 `access` 属性指定路由访问权限：

export default [
  {
    path: '/page1',
    component: '@/pages/Page1',
    access: 'canReadPage1',
  },
  {
    path: '/page2',
    component: '@/pages/Page2',
    access: 'canReadPage2',
  },
];

在上面的例子中，我们将 `access` 属性分别指定为 `canReadPage1` 和 `canReadPage2`，表示只有当用户拥有对应的权限时才能访问对应的路由。

以上就是在 Umi 中配置路由权限的步骤。通过上述配置，我们可以实现简单的路由权限控制。