Vue-element-admin: 路由权限的修改，建议增加一个根据角色进行可视化编辑的页面

[tong3jie]

[PanJiaChen]

现在不管是路由的权限，还是用户的角色暂时都是本地写死的，所以增加权限修改页体验也不很好，我思考一下怎么展现好一点

[tong3jie]

谢谢，期待中。
个人建议能否在demo中增加一个Mock接口，然后通过修改store下的permission.js动态从mock中获取的当前token对应的权限，然后在前端页中通过树形结构来动态加载并编辑的它们。

[tong3jie]

看看翻看了issue的内容，看看有好几个跟我类似的需求，哈哈。请潘神考虑一下。

[Hanjijiang]

同求，觉得权限后端获取到比较好

[daiing]

同求，权限从后端获取权限列表

[jianliulin]

同求，觉得权限后端获取到比较好+1

[Danbaoshan]

同求，觉得权限后端获取到比较好+1

[sunflower-tc]

同求，觉得权限后端获取到比较好+1

[chensource]

同求~

[hanxujoy88]

同样求

[pyice]

请问这个功能会考虑更新么？

[Mr-arvin]

如果直接将 @/router/index.js 中的 asyncRouterMap 存在服务端，_import以及Layout就变成String类型失效了。

[ycg000344]

@Mr-arvin 兄dei , asyncRouterMap 存在服务端，_import以及Layout就变成String类型失效的解决方案你看看是否有帮助。

1. 修改action

    GenerateRoutes({ commit }, data) {
        return new Promise(resolve => {
        const { asyncRouterMap } = data
        const accessedRouters = convertRouter(asyncRouterMap)
        console.log(accessedRouters)
        commit('SET_ROUTERS', accessedRouters)
        resolve()
        })
    }

1. 将后台的路由表进行格式化

/**
 *将后台的路由表进行格式化
 * @param {*} asyncRouterMap
 */
function convertRouter(asyncRouterMap) {
  const accessedRouters = []
  if (asyncRouterMap) {
    asyncRouterMap.forEach(item => {
      var parent = generateRouter(item, true)
      var children = []
      if (item.children) {
        item.children.forEach(child => {
          children.push(generateRouter(child, false))
        })
      }
      parent.children = children
      accessedRouters.push(parent)
    })
  }
  accessedRouters.push({ path: '*', redirect: '/404', hidden: true })
  return accessedRouters
}

1. 对component的处理

function generateRouter(item, isParent) {
  var router = {
    path: item.path,
    name: item.name,
    meta: item.meta,
    // component: isParent ? Layout : () => import(item.component)
    component: isParent ? Layout : componentsMap[item.name]
  }
  return router
}

1. componentsMap 需要在事先定义好

export const componentsMap = {
  example_table: () => import('@/views/table/index'),
  example_tree: () => import('@/views/tree/index'),
  form_index: () => import('@/views/form/index')
}

[ipengyo]

还是直接根据权限判断比较好维护

[tangkepeng]

确实，实际项目中还是需要可视化配置权限功能，辛苦大神了

[Samdyddd]

@ycg000344 额你这个方法好像不行，菜单可以渲染了，但是打开是空白页；

[ycg000344]

@Samdyddd
你需要确认一下第三步中的

componentsMap[item.name]

还有F12里面的报错信息来改了。

[Samdyddd]

哦哦，多谢你的回答了。我后来发现没有addRoutes(),现在搞定。3Q

[aikugui]

这个现在有demo出来不

[wlLeblanc]

@Samdyddd 兄弟你那个打开时空白页是怎么解决的？谢谢！

[wlLeblanc]

@Samdyddd 已经解决，谢谢！

[BoBoooooo]

@ycg000344

你好，场景是在某个表格页面里 点详情按钮的时候跳转到详情页（不采用dialog的方案）。这样的话问题如下：

1.
动态路由返回了以后，如果我要在里面再套一层children路由的话。
是不是只能在后台menu表里再加一层子节点了。。

2.
前端再写一份路由（用来存这些详情页面），点详情后 ，整个页面跳转到这个路由。这样的话就是要多拼一份路由 。

想问问答主怎么处理的

[ensleep]

我觉得对于SPA系统，菜单和权限最好分开考虑设计。权限针对后台RESTFul接口，用户是否有访问某一个接口的权限，由后台权限系统控制并判断。前台的路由只是用于生成菜单，而菜单，其实做不一安全管控，毕竟只是前台的显示与否而已，所以，他的作用是加强用户体验，让用户看不到自己没有权限的界面的菜单。

这样，逻辑就清析了。

权限控制单独由后台管理。

菜单作为资源的一种，由管理员配置针对哪些角色显示哪些。
@PanJiaChen @tong3jie

[qzmly100]

这个菜单栏走数据库的方法还没实现吗？

[usernamecantbeXXX]

@ycg000344 谢谢 ，已经按照你的方式实现了

[jiejiege123]

@Samdyddd 已经解决，谢谢！

请问下怎么解决的啊

[PanJiaChen]

https://github.com/PanJiaChen/vue-element-admin/pull/1605
已添加

在线demo

之后会添加服务端返回demo

[fya0122]

@ycg000344 老兄，你这个貌似只是一级跟二级菜单可以用吧？好像到了三级里面，children就出现不了！

[fanbao1]

@ycg000344 感谢！解决了~第四步不能省略吗？
// component: isParent ? Layout : () => import(item.component)
这种写法感觉更灵活，但是报找不到模块，求解决办法

[zy784940112]

@Samdyddd 已经解决，谢谢！

componentsMap[item.name]

怎么解决的

[4550155]

@ycg000344 感谢！解决了~第四步不能省略吗？
// component: isParent ? Layout : () => import(item.component)
这种写法感觉更灵活，但是报找不到模块，求解决办法

我也遇到同样的问题 请问解决了么?

[yzbas123]

如果直接将 @/router/index.js 中的 asyncRouterMap 存在服务端，_import以及Layout就变成String类型失效了。

component属性先存一个字符串,前端这边拿到进行解析,根据这个component生成一个路径,然后使用正常使用imoprt传入该生成的路径,我现在就这样做的

[yanglin1994]

为什么一直是空白，并且地址还不对，是哪里出现问题了？

[yzbas123]

@yanglin1994
我建议你用作者提到过的那种键值对形式管理import导入和你的component字段的字符串的关系,就是说那边component存一个字符串标识一下就行了,然后前端这边还要一个对象用来管理,component字符串对应导入哪个组件

[yzbas123]

@yanglin1994

类似这样的东西

[thyxsl]

@Mr-arvin 兄dei , asyncRouterMap 存在服务端，_import以及Layout就变成String类型失效的解决方案你看看是否有帮助。

1. 修改action

    GenerateRoutes({ commit }, data) {
        return new Promise(resolve => {
        const { asyncRouterMap } = data
        const accessedRouters = convertRouter(asyncRouterMap)
        console.log(accessedRouters)
        commit('SET_ROUTERS', accessedRouters)
        resolve()
        })
    }

1. 将后台的路由表进行格式化

/**
 *将后台的路由表进行格式化
 * @param {*} asyncRouterMap
 */
function convertRouter(asyncRouterMap) {
  const accessedRouters = []
  if (asyncRouterMap) {
    asyncRouterMap.forEach(item => {
      var parent = generateRouter(item, true)
      var children = []
      if (item.children) {
        item.children.forEach(child => {
          children.push(generateRouter(child, false))
        })
      }
      parent.children = children
      accessedRouters.push(parent)
    })
  }
  accessedRouters.push({ path: '*', redirect: '/404', hidden: true })
  return accessedRouters
}

1. 对component的处理

function generateRouter(item, isParent) {
  var router = {
    path: item.path,
    name: item.name,
    meta: item.meta,
    // component: isParent ? Layout : () => import(item.component)
    component: isParent ? Layout : componentsMap[item.name]
  }
  return router
}

1. componentsMap 需要在事先定义好

export const componentsMap = {
  example_table: () => import('@/views/table/index'),
  example_tree: () => import('@/views/tree/index'),
  form_index: () => import('@/views/form/index')
}

老哥们 这个在哪改啊

[fanbao1]

store->modules->permission.js