vue根据权限动态生成路由

javascript">import store from '@/store' // vuex
import router from '@/router' // router
import axios from './request' // axios
// 存放页面信息
const data = [
  // { // 主菜单
  //   path: '/okkk', // 页面路径
  //   name: 'okkk', // 名称
  //   component: () => import('@/views/Index/Index.vue'), // 嵌套的组件
  //   // meta 参数 title标题  icon 图标 id 路由id和权限id对应   hidden 是否隐藏 true 隐藏 seo 排序优先级 parentId 父权限id 主菜单0
  //   meta: { title: '系统管理', icon: '', id: 91300, hidden: false, seo: 0, parentId: 0 },
  //   children: [ // 子菜单
  //   ]
  // },
  {
    path: '/systemManagement',
    name: 'systemManagement',
    component: () => import('@/views/Index/subMenus.vue'),
    // meta 参数 title标题  icon 图标 id 路由id和权限id对应   hidden 是否隐藏 true 隐藏 seo 排序优先级 parentId 父权限id 主菜单0
    meta: { title: '系统管理', icon: '', id: 90000, seo: 0, parentId: 0, menu: '主菜单' }
  },
  {
    path: '/personalSetting',
    name: 'personalSetting',
    component: () => import('@/views/SystemManagement/BasicSetting/PersonalSetting.vue'),
    meta: { title: '个人设置', icon: '', id: 91300, seo: 0, parentId: 90000, menu: '基本设置' }
  }
  }
]

// 权限列表  权限名称:权限id
const auth = {
  // 系统管理
  SYSTEMMODULE: 90000, // 系统管理
  // 个人设置
  SYSTEMMOUULE_PERSONAL_SETTINGS_CHANGEPWD: 91301// 修改密码
}

// 验证是否拥有权限
export function checkAuth(authId) {
  return store.getters.getPermissionList.indexOf(authId) > -1
}

// 生成路由 从服务端请求权限列表
export function generateRoute() {
  return new Promise((resolve, reject) => {
    const routeNames = [] // 存放路由名称
    // 从后端加载权限列表

    axios
      .get('/******（查询权限id列表）', { headers: { closedLoading: true } })
      .then(res => {
        // 查询权限列表 并生成 路由
        queryPermission(res.data).forEach(item => {
          // 根据路由列表添加路由
          router.addRoute(item)
          routeNames.push(item.name)
        })
        // 添加全局匹配 404 路由
        // **********
        // 将路由名称存储到store 删除时使用
        store.commit('setRoutes', routeNames)
        resolve() // 成功
      })
      .catch(error => {
        reject(error) // 失败返回错误信息
      })
  })
}

// 删除路由
export function deleteRoute() {
  store.getters.getRoutes.forEach(route => {
    router.removeRoute(route)
  })
  store.commit('removeRoutes') // 删除storm内的路由列表
  store.commit('removePermissionList') // 删除权限列表
}

// 查询权限   permission 权限列表 子权限
function queryPermission(permission) {
  const routes = querySubPermission(data, permission)
  store.commit('setPermissionList', queryAuth(permission)) // 将权限id列表 天啊及到vuex中
  return routes
}

// 查询子权限 subPermission 子权限对象, permission 权限列表
function querySubPermission(subPermission, permission) {
  const permissionList = [] // 存放拥有的权限
  subPermission.forEach(item => {
    // 便利对象
    if (permission.indexOf(item.meta.id.toString()) > -1) {
      // 判断是否包含该权限
      permissionList.push(item) // 添加到列表
    }
  })
  // 对权限列表进行排序 seo值越大越靠前
  permissionList.sort((x, y) => {
    if (x.meta.seo < y.meta.seo) {
      return 1
    }
    if (x.meta.seo > y.meta.seo) {
      return -1
    }
    return 0
  })
  const list = [] // 存放生产的路由信息
  permissionList.forEach(item => {
    // 便利权限列表
    const route = {
      // 创建路由信息
      name: item.name, // 路由名称
      path: item.path, // 路径
      meta: item.meta, // 路由参数
      component: item.component // 路由框架
    }
    if ('children' in item) {
      // 判断该路由下是否有子路由
      route.children = querySubPermission(item.children, permission) // 查询子路由权限
    }
    const menu = {
      // 创建菜单
      name: item.name, // 路由名称
      path: item.path, // 路径
      meta: item.meta // 路由参数
    }
    // 添加到storm中
    store.commit('pushMenus', menu)
    list.push(route) // 添加到路由列表
  })
  return list
}

// 查询菜单
export function queryMenus(id) {
  const menus = []
  store.getters.getMenus.forEach(menu => {
    // 判断该菜单父菜单id是否和需要查询的菜单id相同 且不为隐藏菜单
    if (menu.meta.parentId === id && (!('hidden' in menu.meta) || !menu.meta.hidden)) {
      menus.push(menu)
    }
  })
  // 对菜单进行排序 seo值越大越靠前
  menus.sort((x, y) => {
    if (x.meta.seo < y.meta.seo) {
      return 1
    }
    if (x.meta.seo > y.meta.seo) {
      return -1
    }
    return 0
  })
  const result = []
  const groupMenu = {}
  menus.forEach(menu => {
    const meta = menu.meta
    const subArray = groupMenu[meta.menu] ? groupMenu[meta.menu] : []
    if (subArray.length === 0) {
      groupMenu[meta.menu] = subArray
      result.push({ title: meta.menu, sub: subArray })
    }
    subArray.push(menu)
  })
  return result
}

// 查询权限 返回拥有的权限id
function queryAuth(permission) {
  const authList = []
  for (const key in auth) {
    // 便利权限列表和后端返回的权限列表进行比对
    if (permission.indexOf(auth[key].toString()) > -1) {
      authList.push(auth[key])
    }
  }
  return authList
}

export default auth