「这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战」。
由于一直想尝试react,最近刚好有空闲时间,于是觉得开发个后台管理系统练练手。首当其冲的拿出了ant-design-pro来搭建。遵循官网的指引,一步一步搭建好,项目成功跑起来之后。
发现路由是写在 config 文件夹下 config.js 文件中配置,也可写在 routes.js 文件中。 但是路由是提前写好的固定不变的,我想达成的结果是有后台生成特定角色相关路由。从而达到权限管理的目的。
由于antdPro 使用有umi。umi有运行时配置的设置内容。其 中patchRoutes({routes})方法。和render(oldRender:Function)方法。 其实用方法: 在src/app.jsx文件中添加函数
export function patchRoutes({ routes }) {
routes.unshift({
path: '/foo',
exact: true,
component: require('@/extraRoutes/foo').default,
});
}
let extraRoutes;
export function patchRoutes({ routes }) {
merge(routes, extraRoutes);
}
export function render(oldRender) {
fetch('/api/routes').then(res=>res.json()).then((res) => {
extraRoutes = res.routes;
oldRender();
})
}
使用该方法可以,做到动态路由的效果,但是我们后台发来的路由参数比较多。pathRoutes()函数中 使用递归方法整理过后在添加进路由这种形式,是可以把路由添加进去,但是这样形成的路由无法找到对应的模板。由于我对此研究不深,不知道问题出在哪,于是寻找其他解决方案,发现antdPro 提供了一种权限管理的方案。
antdPro 权限管理方案。
在src/access.js src目录下建立access.js文件。改文件中export default 一个函数,用以定义用户拥有的权限
export default function (initialState = {}) {
const { isAdmin, hasRoutes = [] } = initialState;
return {
// ...
adminRouteFilter: () => isAdmin, // 只有管理员可访问
normalRouteFilter: (route) => hasRoutes.includes(route.name), // initialState 中包含了的路由才有权限访问
};
}
然后安装以下方式在路由配置上加上 access
// config/config.js
import { defineConfig } from 'umi';
export default defineConfig({
routes: [
{
path: '/foo',
name: 'foo',
// ...
access: 'normalRouteFilter', // 会调用 src/access.ts 中返回的 normalRouteFilter 进行鉴权
},
{
path: '/admin',
name: 'admin',
// ...
access: 'adminRouteFilter', // 会调用 src/access.ts 中返回的 adminRouteFilter 进行鉴权
},
],
// ...
});
这样可以做到权限管理,但是不完美,仍需要把全部路径都列出来,暂时没有研究就出通umi配置时运行的方式动态添加路由并且能加载模板(不出现404页面)的方法。