Vue element-admin 动态路由菜单 对接后台菜单权限表(前后端分离)

本文已参与「新人创作礼」活动，一起开启掘金创作之路。
首先下载element admin 模板 官方下载地址

npm install 依赖那些我就不说了

第一步 需要修改的地方 src/utils/request.js文件

这个文件中设置 请求头是否带token 因为 作者的项目是前后端分离 的所以设置了，以及 请求结果的状态码设置

第二步 修改的的地方是 src/api/user.js

这里是设置项目请求 的路径

第三步 去src/store/modules/下创建 permission.js(作者下载的modules 下是没有这个文件的)

import { constantRoutes } from '@/router'
import {getAuthMenu} from '@/api/user'
import Layout from '@/views/layout'

function filterAsyncRouter(asyncRouterMap) { // 遍历后台传来的路由字符串，转换为组件对象
  try {
    const accessedRouters = asyncRouterMap.filter(route => {
      if (route.component) {
        if (route.component === 'Layout') { // Layout组件特殊处理
          route.component = Layout
        } else {
          const component = route.component
          route.component = resolve => {
            require(['@/views' + component + '.vue'], resolve)
          }
        }
      }
      if (route.children && route.children.length) {
        route.children = filterAsyncRouter(route.children)
      }
      return true
    })
    return accessedRouters
  } catch (e) {
    console.log(e)
  }
}

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

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

const actions = {
  async generateRoutes({ commit }, roles) {
    // 取后台路由
    const asyncRouter = await getAuthMenu()
    //进行封装common
    return new Promise(resolve => {
      const tmp = asyncRouter.data.menu
      const accessedRoutes = filterAsyncRouter(tmp)
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

第四步 修改src 下面的permission.js文件

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'
import getPageTitle from '@/utils/get-page-title'
NProgress.configure({ showSpinner: false })
const whiteList = ['/login']
//路由钩子
router.beforeEach(async(to, from, next) => {
  NProgress.start()
  document.title = getPageTitle(to.meta.title)
  const hasToken = getToken()
  //是否存在token
  if (hasToken) {
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      const hasGetUserInfo = store.getters.roles
      if (hasGetUserInfo) {
        next()
      } else {
        try {
          // 获取个人信息
          await store.dispatch('user/getInfo')
          // 获取菜单
          const  rolers ='admin';//这里是可以从上面用户信息里获取
          const accessRoutes= await store.dispatch('permission/generateRoutes',rolers);
          router.addRoutes(accessRoutes)
          console.log(store)
          next({...to,replace:true})
        } catch (error) {
          // remove token and go to login page to re-login
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      // other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})
router.afterEach(() => {
  // finish progress bar
  NProgress.done()
})

第四步 修改下 src/router/index.js

删除不需要的静态路由（留下需要的公共路由）

在src/store/getters.js 添加我们需要的key获取的路由都有存到state中 后面需要获取的话必须在这设置

敲黑板重点来了（作者踩了半天的坑）因为上面是用 store.dispatch（）方法的-.-

最后 修改 src/views/layout/components/Sidebar下的index.vue(作者移动了这个文件正常应该是在src下，改的内容一样...)

这里设置是因为 开始我们把动态路由放到了 getters下的routes下面 看看控制台打印的store 到这 基本上就是前端修改完成了

最后我们看看接口返回的数据结构

{
    "success": true,
    "code": 20000,
    "message": "成功",
    "data": {
        "menu": [
            {
                "redirect": "noredirect",
                "path": "/permissions",
                "component": "Layout",
                "hidden": false,
                "children": [
                    {
                        "path": "/permission/list",
                        "component": "/permission/list",
                        "hidden": false,
                        "meta": {
                            "icon": "el-icon-reading\r\n",
                            "title": "权限列表"
                        },
                        "name": "name_7"
                    }
                ],
                "meta": {
                    "icon": "el-icon-s-check\r\n",
                    "title": "权限管理"
                },
                "name": "name_2",
                "alwaysShow": true
            },
            {
                "redirect": "noredirect",
                "path": "/users",
                "component": "Layout",
                "hidden": false,
                "children": [
                    {
                        "path": "/user/list",
                        "component": "/user/list",
                        "hidden": false,
                        "meta": {
                            "icon": "el-icon-reading\r\n",
                            "title": "用户列表"
                        },
                        "name": "name_12"
                    }
                ],
                "meta": {
                    "icon": "el-icon-s-custom",
                    "title": "用户管理"
                },
                "name": "name_3",
                "alwaysShow": true
            },
            {
                "redirect": "noredirect",
                "path": "/rolers",
                "component": "Layout",
                "hidden": false,
                "children": [
                    {
                        "path": "/user/list",
                        "component": "/user/list",
                        "hidden": false,
                        "meta": {
                            "icon": "el-icon-reading\r\n",
                            "title": "角色列表"
                        },
                        "name": "name_13"
                    }
                ],
                "meta": {
                    "icon": "el-icon-user",
                    "title": "角色管理"
                },
                "name": "name_4",
                "alwaysShow": true
            },
            {
                "redirect": "noredirect",
                "path": "/menus",
                "component": "Layout",
                "hidden": false,
                "children": [
                    {
                        "path": "/menu/list",
                        "component": "/menu/list",
                        "hidden": false,
                        "meta": {
                            "icon": "el-icon-reading\r\n",
                            "title": "菜单列表"
                        },
                        "name": "name_14"
                    }
                ],
                "meta": {
                    "icon": "el-icon-menu",
                    "title": "菜单管理"
                },
                "name": "name_5",
                "alwaysShow": true
            },
            {
                "redirect": "noredirect",
                "path": "/tenants",
                "component": "Layout",
                "hidden": false,
                "children": [
                    {
                        "path": "/tenant/list",
                        "component": "/tenant/list",
                        "hidden": false,
                        "meta": {
                            "icon": "el-icon-reading\r\n",
                            "title": "租户列表"
                        },
                        "name": "name_15"
                    }
                ],
                "meta": {
                    "icon": "el-icon-house\r\n",
                    "title": "租户管理"
                },
                "name": "name_6",
                "alwaysShow": true
            }
        ]
    }
}

踩坑第二次 菜单加载出来没有父级菜单最后发现没有添加属性 "alwaysShow": true 添加后一切正常

记录下 bolg下 一个后端仔的 bug日常。 QQ elemant admin交流群 588541017