基于Ant Design Pro2 的权限管理实践

前言

在中后台管理项目中，权限是重要的基础功能。在项目架构初期，就要做好全面的设计。 传统的基于url控制的后端权限，在前端spa应用的前提下，已经不再合适。服务端并不能获取到前端的路由跳转。权限这快，前端的逻辑将会更重。基于Ant Design Pro2 ，umi2 的技术栈前提下，antd已经提供的一套相对完善的权限方案。

目标

权限的维度我们希望控制到按钮层，包括菜单，包括路由。

antd方案

antd的方案基于角色维度来进行。config设定当前路由的准入角色。权限组建接受当前角色信息，如此判断渲染的内容。

如需对某些页面进行权限控制，只须在路由配置文件 router.config.js 中设置 authority 属性即可，代表该路由的准入权限，pro 的路由系统中会默认包裹 Authorized 进行判断处理。

缺陷：umi2中基于约定路由的形式。在路由初始化时不能动态配置config。及不能动态修改authority字段。而且基于角色的权限不能满足我们的需求。我们希望精确到用户的权限配置。后端下发菜单，路由以及按钮list。

实现

为解决该问题。我们在router.config.js新增code字段。标记路由的唯一code。Routes定义路由层的父级组件。在该组件中进行路由拦截，实现路由级别权限控制。 // config.js

[
  { path: '/', component: './pages/index.js' },
  { path: '/list', component: './pages/list.js',code:123, Routes: ['./routes/PrivateRoute.js'] },
]
复制代码

// PrivateRoute.js

  if (route.code && menuList && menuList.indexOf(route.code) == -1) {
    router.replace('/exception/403');
  }
复制代码

菜单权限

基于pro的菜单方案进行了修改。直接动刀BasicLayout.js,修改原先基于authority字段的菜单逻辑。改至code字段。

新增路由管理

路由表由前端提供，路由名称，（包括路由，菜单，以及按钮类型）。后端存至服务端。再有对应的token下发对应的code list。

按钮

写个高阶组件封装下button。 over