arco-design-pro-vue
arco-design-pro-vue copied to clipboard
arco-design
能否增加一个服务端动态路由权限的一个实例的mock
- [ ] I'm sure this does not appear in the issue list of the repository
基本信息
现有案例
部分框架中是有这样的案例
预期解决问题
目前看到的动态的那部分流出来了，但是希望能提供一个mock
@HavocZhang 看看这哈 https://github.com/arco-design/arco-design-pro-vue/blob/a2e913d51122832a4d9d899f253c1dd6ff054a4f/arco-design-pro-vite/src/mock/user.ts#L71
@sHow8e 研究了半天，感觉是从服务端拉下来了路由，但是并没有动态注册（addRouter），如果没有在 routers 里面手动添加路由的话会报错，自己尝试各种办法也没有实现。
尝试自己修改后如上图所示 error，求解决方案。
// src/mock/user.ts
Mock.mock(new RegExp('/api/user/menu'), () => {
const menuList: AppRouteRecordRaw[] = [
{
path: '/dashboard',
name: 'dashboard',
meta: {
locale: 'menu.dashboard',
requiresAuth: true,
icon: 'icon-dashboard',
order: 1,
},
children: [
{
path: 'workplace',
name: 'Workplace',
component: 'views/dashboard/workplace/index.vue',
meta: {
locale: 'menu.dashboard.workplace',
requiresAuth: true,
roles: ['*'],
},
},
{
path: 'monitor',
name: 'Monitor',
component: 'views/dashboard/monitor/index.vue',
meta: {
locale: 'menu.dashboard.monitor',
requiresAuth: true,
roles: ['*'],
},
},
],
},
{
path: '/system',
name: 'System',
meta: {
locale: 'menu.system',
requiresAuth: true,
icon: 'icon-settings',
order: 2,
},
children: [
{
path: 'menus',
name: 'Menus',
component: 'views/system/menus/index.vue',
meta: {
locale: 'menu.system.menus',
requiresAuth: true,
roles: ['*'],
},
},
{
path: 'monitor',
name: 'Monitor',
component: 'views/dashboard/monitor/index.vue',
meta: {
locale: 'menu.dashboard.monitor',
requiresAuth: true,
roles: ['*'],
},
},
],
},
];
return successResponseWrap(menuList);
});
// src/components/menu/index.vue 69 行
menuTree.value.forEach((el: RouteRecordRaw) => {
el.children?.map((els: RouteRecordRaw) => {
els.component = () => import(`./@/${els.component}`);
return els;
});
if (isFind) return; // Performance optimization
router.addRoute(el);
backtrack(el, [el.name as string], name);
});
补充一下，上方代码块里面的 els.component = () => import(./@/${els.component}); 按理来说是 els.component = () => import(@/${els.component}); 这样的，但是提示报错，查看了 issues 后发现需要 ./ or ../ 开头，遂使用 ../../../ 定位还是同样错误。
@HavocZhang 看看这哈
https://github.com/arco-design/arco-design-pro-vue/blob/a2e913d51122832a4d9d899f253c1dd6ff054a4f/arco-design-pro-vite/src/mock/user.ts#L71
不好意思，是我描述的有问题，应该是动态角色权限，如何让路由动态匹配权限
@sanqi377 hihi pro的路由实现方式不是动态注册，而是全注册（通过服务端返回的数据进行权限判断，性能方面因为页面本身就是异步组件所以不要考虑这部分的性能问题）。因此要求前端把页面提前配置好。
@HavocZhang hi 那你需要自定义一份服务端权限规则，去做处理就行了。hooks/permission.ts 你获取到服务端的配置信息后，在菜单、指令、路由钩子里走你自定义的服务端权限规则就行了。
@HavocZhang hi 那你需要自定义一份服务端权限规则，去做处理就行了。hooks/permission.ts 你获取到服务端的配置信息后，在菜单、指令、路由钩子里走你自定义的服务端权限规则就行了。
能否麻烦代码示例一下，搞了很久反倒报错了，后端传过来的角色权限集合在前端如何解析动态生成路由呢，菜单栏也是根据路由树生成吗
@Mr-GaoBin hi。pro内置的mock（/api/user/menu）接口中有相关数据的返回。这份数据其实就是服务端版的路由配置信息。本着数据-视图的原则，如果你使用本地配置，渲染的是本地数据的视图。反之则是服务端视图。至于一些细节的权限处理，你只需要在关键节点比如菜单、路由守卫部分进行你业务的处理即可。
@sHow8e 研究了半天，感觉是从服务端拉下来了路由，但是并没有动态注册（addRouter），如果没有在 routers 里面手动添加路由的话会报错，自己尝试各种办法也没有实现。
// src/mock/user.ts Mock.mock(new RegExp('/api/user/menu'), () => { const menuList: AppRouteRecordRaw[] = [ { path: '/dashboard', name: 'dashboard', meta: { locale: 'menu.dashboard', requiresAuth: true, icon: 'icon-dashboard', order: 1, }, children: [ { path: 'workplace', name: 'Workplace', component: 'views/dashboard/workplace/index.vue', meta: { locale: 'menu.dashboard.workplace', requiresAuth: true, roles: ['*'], }, }, { path: 'monitor', name: 'Monitor', component: 'views/dashboard/monitor/index.vue', meta: { locale: 'menu.dashboard.monitor', requiresAuth: true, roles: ['*'], }, }, ], }, { path: '/system', name: 'System', meta: { locale: 'menu.system', requiresAuth: true, icon: 'icon-settings', order: 2, }, children: [ { path: 'menus', name: 'Menus', component: 'views/system/menus/index.vue', meta: { locale: 'menu.system.menus', requiresAuth: true, roles: ['*'], }, }, { path: 'monitor', name: 'Monitor', component: 'views/dashboard/monitor/index.vue', meta: { locale: 'menu.dashboard.monitor', requiresAuth: true, roles: ['*'], }, }, ], }, ]; return successResponseWrap(menuList); });// src/components/menu/index.vue 69 行 menuTree.value.forEach((el: RouteRecordRaw) => { el.children?.map((els: RouteRecordRaw) => { els.component = () => import(`./@/${els.component}`); return els; }); if (isFind) return; // Performance optimization router.addRoute(el); backtrack(el, [el.name as string], name); });补充一下，上方代码块里面的
els.component = () => import(./@/${els.component});按理来说是els.component = () => import(@/${els.component});这样的，但是提示报错，查看了 issues 后发现需要./or../开头，遂使用../../../定位还是同样错误。
请问addRouter的问题解决了吗
