vue-element-admin动态路由菜单(从后台数据库中获取,)附根据角色权限动态生成路由思路

浅浅的花香味﹌ 2022-11-18 01:27 1616阅读 0赞

本项目采用的模板为[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
    }

下面附上修改后的代码

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.  引入后台接口的方法(也就是封装好的axios，然后把接口统一写在一个js文件里，用的时候直接引入，方便后期维护)
    
    首先在`@/api`目录下(也就是`src/api`目录)新建`menu.js`文件,定义一个方法用来获取数据

import request from '@/utils/request'
    
    export function getMenu() {
      return request({
        url: '/menu/selectMenu',
        method: 'post',
      })
    }

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

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

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)
          })
        })
      }
    }

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 }
          }
        ]
      }

**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)
      }
    }

对应的数据库表结构![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE1MzA2Mw_size_16_color_FFFFFF_t_70]  
**请自行编写转换方法思路！！！！**  
**请自行编写转换方法思路！！！！**  
**请自行编写转换方法思路！！！！**

需要引入Layout`import Layout from '@/layout'`

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

## 根据角色权限动态生成路由菜单 ##

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

export function getMenu(data) {
      return request({
        url: '/menu/selectMenu',
        method: 'post',
        params: data
      })
    }

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

[vue-element-admin]: https://gitee.com/panjiachen/vue-element-admin
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE1MzA2Mw_size_16_color_FFFFFF_t_70]: /images/20221022/f55fca0dfe0f4a6d83c43a170edfd641.png