路由权限管理

使用技术

这里使用的是 umi 内置的 @umijs/plugin-access

启用方式

在项目 src 目录下新建 access.ts 文件，在 umi 中，有此文件，就表示启用了。

配置 access.ts

该文件需要返回一个 function，返回的 function 会在应用初始化阶段被执行，执行后返回的对象将会被作为用户所有权限的定义。对象的每个 key 对应一个 boolean 值，只有 true 和 false，代表用户是否有该权限。

/*
 * @Description: 权限配置文件
 * @注意：此文件是项目的配置文件，修改后，需要重新 yarn start 才能生效
 * @Author: kivet
 * @Date: 2022-01-26 09:18:36
 * @LastEditTime: 2022-01-26 10:26:42
 */
import { MenuDataItem } from '@ant-design/pro-layout';

export default function (initialState: any) {
  const { hideArr = [] } = initialState;

  return {
    adminRouteFilter: (route: MenuDataItem) => !hideArr.includes(route.path),
  };
}

上面的 adminRouteFilter，就是一个权限校验的 key 值，他只能是一个 Boolean 值，代码中可以看到，进行校验时用到了 initialState.hideArr 这个数据，这里的 initialState 是从 src/app.ts 中对其进行初始化状态插件 @umijs/plugin-initial-state 提供的数据。

在 src/app.ts 进行初始化

/**
 * 向 @/access.ts 配置文件传递某些用作权限校验的数据
 */
export async function getInitialState() {
  const data = {
    hideArr: ['/detail/secondary/three'],
  };
  return data;
}

配置路由

/*
 * @Description: 详情页 route 配置
 * @Author: kivet
 * @Date: 2022-01-25 15:55:00
 * @LastEditTime: 2022-01-26 10:33:57
 */

const BASE_URL = 'detail';

const detailRoute = {
  path: `/${BASE_URL}`,
  component: '@/layouts/detailLayout',
  routes: [
    {
      name: '详情一级页面',
      path: `/${BASE_URL}/detailOnlyOne`,
      component: '@/pages/DetailDemo/Demo1',
    },
    {
      name: '详情二级页面',
      path: `/${BASE_URL}/secondary`,
      routes: [
        {
          name: '详情二级1',
          path: `/${BASE_URL}/secondary/two`,
          component: '@/pages/DetailDemo/Demo2',
          access: 'adminRouteFilter',           // <=== 主要看这里
        },
        {
          name: '详情二级2',
          path: `/${BASE_URL}/secondary/three`,
          component: '@/pages/DetailDemo/Demo3',
          access: 'adminRouteFilter',           // <=== 主要看这里
        },
        {
          name: '详情二级3',
          path: `/${BASE_URL}/secondary/four`,
          component: '@/pages/DetailDemo/Demo4',
          access: 'adminRouteFilter',           // <=== 主要看这里
        },
      ],
    },
    {
      redirect: '/404',
    },
  ],
};

module.exports = detailRoute;

在路由配置文件中，使用 access 属性进行配置，值就是上面 access.ts 文件中返回的对象的键名，这样字，路由的权限配置就搞定了。

如上面的配置中，在 app.ts 文件中配置了 “详情二级2” 这个页面没有权限，然后路由配置文件中也配置好了 access: 'adminRouteFilter'，这个时候你就会发现，原本没有配置前存在的 “详情二级2” 这个页面，现在没有显示出来了。

注意：

1. 这里只是简单的配置了一下，实际情况以项目开发过程中自行编写逻辑。
2. 修改了 access.ts 文件和 路由配置文件，需要重新 yarn start 项目才会生效。

其它

项目权限的配置，这里其实不止是路由的权限配置。

项目中的一些权限的配置，都是可以在这里进行配置，

比如说某个页面中的一个按钮，只有管理员的账号登录才能展示出来等。

文档这里只是以路由的权限配置为例进行介绍。并没有讲页面内的权限控制，但大体上的使用逻辑都差不多，可自行去查阅官方文档进行查看。

---

[0] Ant Design Pro 权限管理

[1] UmiJS Plugins - @umijs/plugin-access

---

返回目录文档