permission.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. import auth from '@/plugins/auth'
  2. import router, { constantRoutes, dynamicRoutes } from '@/router'
  3. import { getRouters } from '@/api/menu'
  4. import Layout from '@/layout/index'
  5. import ParentView from '@/components/ParentView'
  6. import InnerLink from '@/layout/components/InnerLink'
  7. // 匹配views里面所有的.vue文件
  8. const modules = import.meta.glob('./../../views/**/*.vue')
  9. const usePermissionStore = defineStore(
  10. 'permission',
  11. {
  12. state: () => ({
  13. routes: [],
  14. addRoutes: [],
  15. defaultRoutes: [],
  16. topbarRouters: [],
  17. sidebarRouters: []
  18. }),
  19. actions: {
  20. setRoutes(routes) {
  21. this.addRoutes = routes
  22. this.routes = constantRoutes.concat(routes)
  23. },
  24. setDefaultRoutes(routes) {
  25. this.defaultRoutes = constantRoutes.concat(routes)
  26. },
  27. setTopbarRoutes(routes) {
  28. this.topbarRouters = routes
  29. },
  30. setSidebarRouters(routes) {
  31. this.sidebarRouters = routes
  32. },
  33. generateRoutes(roles) {
  34. return new Promise(resolve => {
  35. // 向后端请求路由数据
  36. getRouters().then(res => {
  37. const sdata = JSON.parse(JSON.stringify(res.data))
  38. const rdata = JSON.parse(JSON.stringify(res.data))
  39. const defaultData = JSON.parse(JSON.stringify(res.data))
  40. const sidebarRoutes = filterAsyncRouter(sdata)
  41. const rewriteRoutes = filterAsyncRouter(rdata, false, true)
  42. const defaultRoutes = filterAsyncRouter(defaultData)
  43. const asyncRoutes = filterDynamicRoutes(dynamicRoutes)
  44. asyncRoutes.forEach(route => { router.addRoute(route) })
  45. this.setRoutes(rewriteRoutes)
  46. // this.setSidebarRouters(constantRoutes.concat(sidebarRoutes))
  47. this.setSidebarRouters(constantRoutes)
  48. this.setDefaultRoutes(sidebarRoutes)
  49. this.setTopbarRoutes(defaultRoutes)
  50. resolve(rewriteRoutes)
  51. })
  52. })
  53. }
  54. }
  55. })
  56. // 遍历后台传来的路由字符串,转换为组件对象
  57. function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
  58. return asyncRouterMap.filter(route => {
  59. if (type && route.children) {
  60. route.children = filterChildren(route.children)
  61. }
  62. if (route.component) {
  63. // Layout ParentView 组件特殊处理
  64. if (route.component === 'Layout') {
  65. route.component = Layout
  66. } else if (route.component === 'ParentView') {
  67. route.component = ParentView
  68. } else if (route.component === 'InnerLink') {
  69. route.component = InnerLink
  70. } else {
  71. route.component = loadView(route.component)
  72. }
  73. }
  74. if (route.children != null && route.children && route.children.length) {
  75. route.children = filterAsyncRouter(route.children, route, type)
  76. } else {
  77. delete route['children']
  78. delete route['redirect']
  79. }
  80. return true
  81. })
  82. }
  83. function filterChildren(childrenMap, lastRouter = false) {
  84. var children = []
  85. childrenMap.forEach((el, index) => {
  86. if (el.children && el.children.length) {
  87. if (el.component === 'ParentView' && !lastRouter) {
  88. el.children.forEach(c => {
  89. c.path = el.path + '/' + c.path
  90. if (c.children && c.children.length) {
  91. children = children.concat(filterChildren(c.children, c))
  92. return
  93. }
  94. children.push(c)
  95. })
  96. return
  97. }
  98. }
  99. if (lastRouter) {
  100. el.path = lastRouter.path + '/' + el.path
  101. if (el.children && el.children.length) {
  102. children = children.concat(filterChildren(el.children, el))
  103. return
  104. }
  105. }
  106. children = children.concat(el)
  107. })
  108. return children
  109. }
  110. // 动态路由遍历,验证是否具备权限
  111. export function filterDynamicRoutes(routes) {
  112. const res = []
  113. routes.forEach(route => {
  114. if (route.permissions) {
  115. if (auth.hasPermiOr(route.permissions)) {
  116. res.push(route)
  117. }
  118. } else if (route.roles) {
  119. if (auth.hasRoleOr(route.roles)) {
  120. res.push(route)
  121. }
  122. }
  123. })
  124. return res
  125. }
  126. export const loadView = (view) => {
  127. let res;
  128. for (const path in modules) {
  129. const dir = path.split('views/')[1].split('.vue')[0];
  130. if (dir === view) {
  131. res = () => modules[path]();
  132. }
  133. }
  134. return res;
  135. }
  136. export default usePermissionStore