permission.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. import { constantRoutes } from '@/router'
  2. import { getRouters } from '@/api/menu'
  3. import Layout from '@/layout/index'
  4. import ParentView from '@/components/ParentView';
  5. import { toCamelCase } from "@/utils";
  6. const permission = {
  7. state: {
  8. routes: [],
  9. addRoutes: [],
  10. sidebarRouters: [], // 左侧边菜单的路由,被 Sidebar/index.vue 使用
  11. topbarRouters: [], // 顶部菜单的路由,被 TopNav/index.vue 使用
  12. },
  13. mutations: {
  14. SET_ROUTES: (state, routes) => {
  15. state.addRoutes = routes
  16. state.routes = constantRoutes.concat(routes)
  17. },
  18. SET_DEFAULT_ROUTES: (state, routes) => {
  19. state.defaultRoutes = constantRoutes.concat(routes)
  20. },
  21. SET_TOPBAR_ROUTES: (state, routes) => {
  22. state.topbarRouters = routes
  23. },
  24. SET_SIDEBAR_ROUTERS: (state, routes) => {
  25. state.sidebarRouters = routes
  26. },
  27. },
  28. actions: {
  29. // 生成路由
  30. GenerateRoutes({ commit }) {
  31. return new Promise(resolve => {
  32. // 向后端请求路由数据(菜单)
  33. getRouters().then(res => {
  34. const sdata = JSON.parse(JSON.stringify(res.data)) // 【重要】用于菜单中的数据
  35. const rdata = JSON.parse(JSON.stringify(res.data)) // 用于最后添加到 Router 中的数据
  36. const sidebarRoutes = filterAsyncRouter(sdata)
  37. const rewriteRoutes = filterAsyncRouter(rdata, false, true)
  38. rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
  39. commit('SET_ROUTES', rewriteRoutes)
  40. commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
  41. commit('SET_DEFAULT_ROUTES', sidebarRoutes)
  42. commit('SET_TOPBAR_ROUTES', sidebarRoutes)
  43. resolve(rewriteRoutes)
  44. })
  45. })
  46. }
  47. }
  48. }
  49. // 遍历后台传来的路由字符串,转换为组件对象
  50. function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
  51. return asyncRouterMap.filter(route => {
  52. // 将 ruoyi 后端原有耦合前端的逻辑,迁移到此处
  53. // 处理 meta 属性
  54. route.meta = {
  55. title: route.name,
  56. icon: route.icon,
  57. noCache: !route.keepAlive,
  58. }
  59. // 路由地址转首字母大写驼峰,作为路由名称,适配 keepAlive
  60. route.name = toCamelCase(route.path, true)
  61. route.hidden = !route.visible
  62. // 处理 component 属性
  63. if (route.children) { // 父节点
  64. if (route.parentId === 0) {
  65. route.component = Layout
  66. } else {
  67. route.component = ParentView
  68. }
  69. } else { // 根节点
  70. route.component = loadView(route.component)
  71. }
  72. // filterChildren
  73. if (type && route.children) {
  74. route.children = filterChildren(route.children)
  75. }
  76. if (route.children != null && route.children && route.children.length) {
  77. route.children = filterAsyncRouter(route.children, route, type)
  78. } else {
  79. delete route['children']
  80. }
  81. return true
  82. })
  83. }
  84. function filterChildren(childrenMap, lastRouter = false) {
  85. var children = []
  86. childrenMap.forEach((el, index) => {
  87. if (el.children && el.children.length) {
  88. if (el.component === 'ParentView' && !lastRouter) {
  89. el.children.forEach(c => {
  90. c.path = el.path + '/' + c.path
  91. if (c.children && c.children.length) {
  92. children = children.concat(filterChildren(c.children, c))
  93. return
  94. }
  95. children.push(c)
  96. })
  97. return
  98. }
  99. }
  100. if (lastRouter) {
  101. el.path = lastRouter.path + '/' + el.path
  102. }
  103. children = children.concat(el)
  104. })
  105. return children
  106. }
  107. export const loadView = (view) => { // 路由懒加载
  108. return (resolve) => require([`@/views/${view}`], resolve)
  109. }
  110. export default permission