vue--element-admin动态路由_element 后端动态路由

作者：代码领袖开发者 | 2024-02-04 14:05:18

踩

element 后端动态路由

本项目采用的模板为vue-element-admin i18n分支

在网上看了很多教程，发现都写的很复杂(本人比较菜) , 用尽千辛万苦终于实现了这个功能

首先修改src/store/modules目录下的permission.js文件
为了区分，下面先附上原文件代码

import { asyncRoutes, constantRoutes } from '@/router'

/**
 * Use meta.role to determine if the current user has permission
 * @param roles
 * @param route
 */
function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    return true
  }
}

/**
 * Filter asynchronous routing tables by recursion
 * @param routes asyncRoutes
 * @param roles
 */
export function filterAsyncRoutes(routes, roles) {
  const res = []

  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })

  return res
}

const state = {
  routes: [],
  addRoutes: []
}

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}

const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      if (roles.includes('admin')) {
        accessedRoutes = asyncRoutes || []
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

下面附上修改后的代码


```java

```java
import { asyncRoutes, constantRoutes } from '@/router'
import { getMenu } from '@/api/menu'
import Layout from '@/layout' 
/**
 * Use meta.role to determine if the current user has permission
 * @param roles
 * @param route
 */
function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    return true
  }
}

/**
 * 后台查询的菜单数据拼装成路由格式的数据
 * @param routes
 * @param data
 */
export function generaMenu(routes, data) {
  const len = data.length
  // eslint-disable-next-line no-const-assign
  for (let i = 0; i < len; i++) {
    /*    alert(data[i].path)
    alert(data[i].meta.title)*/
    const menu = {
      path: data[i].path + '',
      // component: () => import(`${item.component}`),
      component: Layout,
      alwaysShow: data[i].alwaysShow,
      redirect: data[i].redirect + '',
      name: data[i].name + '',
      // hidden: true,
      meta: { title: data[i].meta.title + '', icon: data[i].meta.icon },
      children: []
    }
    // alert('data[i].children' + data[i].children)
    if (data[i].children) {
      const children = data[i].children
      for (let j = 0; j < children.length; j++) {
        const viewPath = children[j].component
        const childrenList = {
          path: children[j].path + '',
          component: (resolve) => require([`@/views/${viewPath}`], resolve),
          name: children[j].name + '',
          // hidden: true,
          // component: () => import(`@/views/${viewPath}`),
          meta: { title: children[j].meta.title + '', icon: children[j].meta.icon }
        }
        menu.children.push(childrenList)
      }
    }
    routes.push(menu)
    /* data.forEach(item => {
      alert(JSON.stringify(item))
      const menu = {
        path: item.path + '',
        // component: () => import(`${item.component}`),
        component: Layout,
        name: item.name + '',
        // hidden: true,
        meta: { title: item.title + '', icon: item.icon, roles: ['admin'] },
        children: []
      }
      if (item.children) {
        const children = data.children
        children.forEach(item1 => {
          const childrenList = {
            path: item1.path + '',
            component: () => import(`${item1.component}`),
            name: item1.name + '',
            // hidden: true,
            meta: { title: item1.title + '', icon: item1.icon, roles: ['admin'] }
          }
          menu.children.push(childrenList)
        })
      }
      routes.push(menu)
    })*/
  }
}
/**
 * Filter asynchronous routing tables by recursion
 * @param routes asyncRoutes
 * @param roles
 */
export function filterAsyncRoutes(routes, roles) {
  const res = []

  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })

  return res
}

const state = {
  routes: [],
  addRoutes: []
}

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}

const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      // 先查询后台并返回左侧菜单数据并把数据添加到路由
      getMenu().then(response => {
        const data = response.data
        // Object.assign(loadMenuData, data)
        generaMenu(asyncRoutes, data)
        let accessedRoutes
        if (roles.includes('admin')) {
          // alert(JSON.stringify(asyncRoutes))
          accessedRoutes = asyncRoutes || []
        } else {
          accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
        }
        commit('SET_ROUTES', accessedRoutes)
        resolve(accessedRoutes)
        // generaMenu(asyncRoutes, data)
      }).catch(error => {
        console.log(error)
      })
    })
  }
}

/* const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      if (roles.includes('admin')) {
        console.log('asyncRoutes' + asyncRoutes)
        accessedRoutes = asyncRoutes || []
        console.log('accessedRoutes' + accessedRoutes)
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}*/

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168

代码详细介绍
引入后台接口的方法(也就是封装好的axios，然后把接口统一写在一个js文件里，用的时候直接引入，方便后期维护)

首先在@/api目录下(也就是src/api目录)新建menu.js文件,定义一个方法用来获取数据

import request from '@/utils/request'

export function getMenu() {
  return request({
    url: '/menu/selectMenu',
    method: 'post',
  })
}
1
2
3
4
5
6
7
8

然后在@/store/moudles下的permission.js中引入

import { getMenu } from '@/api/menu'
1

1
改写actions.generateRoutes方法
思路: 首先调用接口getMenu从后台获取数据，利generaMenu(asyncRoutes, data) 方法组织数据结构为routes的数据结构（generaMenu为自定义的方法）

const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      // 先查询后台并返回左侧菜单数据并把数据添加到路由
      getMenu().then(response => {
        const data = response.data
        // Object.assign(loadMenuData, data)
        generaMenu(asyncRoutes, data)
        let accessedRoutes
        if (roles.includes('admin')) {
          // alert(JSON.stringify(asyncRoutes))
          accessedRoutes = asyncRoutes || []
        } else {
          accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
        }
        commit('SET_ROUTES', accessedRoutes)
        resolve(accessedRoutes)
        // generaMenu(asyncRoutes, data)
      }).catch(error => {
        console.log(error)
      })
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3.编写generaMenu方法
思路: 就是把获取的数据转换为routes的格式,如下,更加详细的请看目录@/router/index.js下的数据结构
这里只给出示例，因为我的数据当时在编写的时候就在后台进行转换了，所以我的转换方法并不适用你们自己的！
请自行编写转换方法思路！！！！
请自行编写转换方法思路！！！！
请自行编写转换方法思路！！！！

数据结构：

{
    path: '/documentation',
    component: Layout,
    children: [
      {
        path: 'index',
        component: () => import('@/views/documentation/index'),
        name: 'Documentation',
        meta: { title: 'documentation', icon: 'documentation', affix: true }
      }
    ]
  }
1
2
3
4
5
6
7
8
9
10
11
12

generaMenu方法代码

export function generaMenu(routes, data) {
  const len = data.length
  // eslint-disable-next-line no-const-assign
  for (let i = 0; i < len; i++) {
    /*    alert(data[i].path)
    alert(data[i].meta.title)*/
    const menu = {
      path: data[i].path + '',
      // component: () => import(`${item.component}`),
      component: Layout,
      alwaysShow: data[i].alwaysShow,
      redirect: data[i].redirect + '',
      name: data[i].name + '',
      // hidden: true,
      meta: { title: data[i].meta.title + '', icon: data[i].meta.icon },
      children: []
    }
    // alert('data[i].children' + data[i].children)
    if (data[i].children) {
      const children = data[i].children
      for (let j = 0; j < children.length; j++) {
        const viewPath = children[j].component
        const childrenList = {
          path: children[j].path + '',
          component: (resolve) => require([`@/views/${viewPath}`], resolve),
          name: children[j].name + '',
          // hidden: true,
          // component: () => import(`@/views/${viewPath}`),
          meta: { title: children[j].meta.title + '', icon: children[j].meta.icon }
        }
        menu.children.push(childrenList)
      }
    }
    routes.push(menu)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

对应的数据库表结构
请自行编写转换方法思路！！！！
请自行编写转换方法思路！！！！
请自行编写转换方法思路！！！！

需要引入Layoutimport Layout from ‘@/layout’

只要可以把数据转换为规定的结构即可！！

根据角色权限动态生成路由菜单
在以上基础上只需要修改接口接收role参数，然后把参数传入后台，后台根据角色信息返回该角色可访问的菜单列表即可

export function getMenu(data) {
  return request({
    url: '/menu/selectMenu',
    method: 'post',
    params: data
  })
}
1
2
3
4
5
6
7

const roleName = roles[0]
      getMenu({ roleName: roleName }).then(response => {
1
2

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/58926