路由处理

[lotherli]

假设路由下有2个页面，2个页面对应的是2个权限（前端控制权限），需要出现A用户能看到第一个页面，B用户看到第二个页面，C用户看全部，需要在左侧菜单里面显示。 我想的是A、B用户看到的左侧菜单只有一个且不需要进行折叠展开，，如果设置hideChildrenInMenu的话，AB不满足，如果设置hideMenu，不够动态化，

const dashboard: AppRouteModule = {
  path: '/dashboard',
  name: 'Dashboard',
  component: LAYOUT,
  redirect: '/dashboard/analysis',
  meta: {
    icon: 'ion:grid-outline',
    title: t('routes.dashboard.dashboard'),
  },
  children: [
    {
      path: 'analysis',
      name: 'Analysis',
      component: () => import('/@/views/dashboard/analysis/index.vue'),
      meta: {
        affix: true,
        title: t('routes.dashboard.analysis'),
         roles:['adminA','adminC']
      },
    },
    {
      path: 'workbench',
      name: 'Workbench',
      component: () => import('/@/views/dashboard/workbench/index.vue'),
      meta: {
        title: t('routes.dashboard.workbench'),
         roles:['adminB','adminC']
      },
    },
  ],
};

[xachary]

C 看到：

• X └ A └ B

A 看到：

• X └ A

B 看到：

• X └ B

@lotherli 你想变成？：

A 看到：

• A

B 看到：

• B

感觉结构都变了，用 meta 配置已经不够用了，思路可能是这样（没测试过）：

const dashboardAB: AppRouteModule[] = [
  {
    path: 'analysis',
    name: 'Analysis',
    component: () => import('/@/views/dashboard/analysis/index.vue'),
    meta: {
      affix: true,
      title: t('routes.dashboard.analysis'),
       roles:['adminA']
    },
  },
  {
    path: 'workbench',
    name: 'Workbench',
    component: () => import('/@/views/dashboard/workbench/index.vue'),
    meta: {
      title: t('routes.dashboard.workbench'),
       roles:['adminB']
    },
  },
];

const dashboardC: AppRouteModule = {
  path: '/dashboard',
  name: 'Dashboard',
  component: LAYOUT,
  redirect: '/dashboard/analysis',
  meta: {
    icon: 'ion:grid-outline',
    title: t('routes.dashboard.dashboard'),
    roles:['adminC']
  },
  children: [
    {
      path: 'analysis',
      name: 'Analysis',
      component: () => import('/@/views/dashboard/analysis/index.vue'),
      meta: {
        affix: true,
        title: t('routes.dashboard.analysis'),
      },
    },
    {
      path: 'workbench',
      name: 'Workbench',
      component: () => import('/@/views/dashboard/workbench/index.vue'),
      meta: {
        title: t('routes.dashboard.workbench'),
      },
    },
  ],
};

const 根路由数组 = [...dashboardAB, dashboardC]

[lotherli]

但是这样的话，其实路由工作量会很大，在用户能看到的菜单这个前提下，可能需要设置很多，我原本的思路是，路由就只有一份代码，根据每一个roles去进行匹配出一份新的路由，就是根据下图位置去做这个事情。这样的话，可能更加符合后台管理，

[xachary]

但是这样的话，其实路由工作量会很大，在用户能看到的菜单这个前提下，可能需要设置很多，我原本的思路是，路由就只有一份代码，根据每一个roles去进行匹配出一份新的路由，就是根据下图位置去做这个事情。这样的话，可能更加符合后台管理

实际情况太难通用了，我项目了按业务需要，整个路由权限都重构了，路由定义99%来自于菜单管理接口，改不动原来的逻辑。 @lotherli

[lotherli]

征集一下这个路由方案，看看咋样，不行后期修改一个demo版本，大家提issue然后一起修改😏

[anncwb]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days