路由权限及动态路由

项目中的后台管理经常需要一些权限设置 并且通过当前登录人生成动态路由来进行对应的权限操作
在我的经手项目中需要先通过登陆人查询所拥有的路由权限 然后再配置路由中过滤 生成路由表 再进行动态生成

一系列代码如下

import Vue from 'vue'
import Router from 'vue-router'
const _import = require('./_import_' + process.env.NODE_ENV)

Vue.use(Router)

~~> 这里的routerMap是需要生成的路由表 在获取到对应路由会拼接~~ 

export const constantRouterMap = [
  {
    path: '/asslogin',
    component: _import('login/assIndex'),
    hidden: true
  }, {
    path: '/login',
    component: _import('login/index'),
    hidden: true
  },

  {
    path: '/logout',
    component: _import('login/logout'),
    hidden: true
  },

  {
    path: '/404',
    component: _import('errorPage/404'),
    hidden: true
  },
  {
    path: '/401',
    component: _import('errorPage/401'),
    hidden: true
  },
  {
    path: '',
    component: Layout,
    redirect: 'zhgdsy',
    children: [{
      path: 'zhgdsy',
      component: _import('zhgd/zhgdsy/index'),
      name: 'zhgdsy',
      meta: {
        title: 'dashboard',
        icon: 'dashboard',
        noCache: true
      }
    }]
  },

]

const router = new Router({
  // mode: 'history', // require service support
  mode: 'hash',
  scrollBehavior: () => ({
    y: 0
  }),
  routes: constantRouterMap
})
export default router
*这里是需要配置的所有路由 用来过滤*
export const asyncRouterMap = [{
    path:"/lmdgl",
    component: Layout,
    name:"基本信息",
    icon: 'jurisdiction',
    authority: 'lmdgl',  
  {
    path:"/lmginfo",
    component: Layout,
    name: '基本信息管理',
    icon: 'setting',
    authority: 'lmginfo',
    children:[
      {
        path: 'home',
      component:_import('zhgd/lmdgl/home/index'),
      name: '首页',
      authority: 'home'
      },
      {
        path:"lmdinfogl",
        component: _import('zhgd/lmdgl/jxLmdBaseinfo/index'),
        name: '基本信息管理',
        authority: 'lmdinfogl'
      },
      {
        path:"jxLmdMaintenanceLog",
        component: _import('zhgd/lmdgl/jxLmdMaintenanceLog/index'),
        name: '维修保记录',
        authority: 'jxLmdMaintenanceLog'
      },
      {
        path:"jxLmdEvent",
        component: _import('zhgd/lmdgl/jxLmdEvent/index'),
        name: '事故信息',
        authority: 'jxLmdEvent'
      },
      {
        path:"jxLmdDriver",
        component: _import('zhgd/lmdgl/jxLmdDriver/index'),
        name: '司机信息管理',
        authority: 'jxLmdDriver'
      }]
    },

    {
    path:"/violationinfo",
    component: Layout,
    name: '违规信息管理',
    authority: 'violationinfo',
    children:[{
      path:"violationsManage",
      component: _import('zhgd/placeholderPage/index'),
      name: '违规行为管理',
      authority: 'violationsManage'
    },{
      path:"nondriverRecord",
      component: _import('zhgd/placeholderPage/index'),
      name: '非司机操作记录',
      authority: 'nondriverRecord'
    },{
      path:"dangerManagement",
      component: _import('zhgd/placeholderPage/index'),
      name: '隐患管理',
      authority: 'dangerManagement'
    }]
  },

  {
    path:"/equipmentMonitoring",
    component: Layout,
    name: '设备监控',
    authority: 'equipmentMonitoring',
    children:[{
      path:"realtimeMonitoring",
      component: _import('zhgd/lmdgl/jxLmdrealtimeMonitoring/index'),
      name: '实时监控',
      authority: 'realtimeMonitoring'
    }]
  },
  }
]

1. 登录界面 拿着username取人员信息的接口 获取该人员下所拥有的权限
2. 把该人员的路由(菜单)权限与配置在router里面的进行递归筛选

getInfo().then(response => {
          const data = response      该menu下的为一维数组

          const menus = {}    
          for (let i = 0; i < data.menus.length; i++) {
            menus[data.menus[i].code] = true     //使该用户所拥有的code设为true
          }
          commit('SET_MENUS', menus)
          const elements = {}
          for (let i = 0; i < data.elements.length; i++) {
            elements[data.elements[i].code] = true
          }
          commit('SET_ELEMENTS', elements)
          resolve(response)
        }).catch(error => {
          reject(error)
        })
        getMenus().then(response => {//获取所有菜单(树形)
          
          const LocalMenus = [];
          response.forEach(item => {
            constantRouterMap.forEach(citem => {
              if (citem.redirect === item.code) {
                LocalMenus.push(item);   把头部菜单push
              }
            });
            asyncRouterMap.forEach(citem => {
              if (citem.authority === item.code) {
                LocalMenus.push(item);
              }
            });

          });

进行递归生成路由表

function filterAsyncRouter(asyncRouterMap, menus, menuDatas) {
  const accessedRouters = asyncRouterMap.filter(route => {
    if (hasPermission(menus, route)) {
      route.name = menuDatas[route.authority].title
      route.icon = menuDatas[route.authority].icon
      if (route.children && route.children.length) {
        route.children = filterAsyncRouter(route.children, menus, menuDatas)
      }
      return true
    }
    return false
  })
  return accessedRouters
}


/**
 * 通过authority判断是否与当前用户权限匹配
 * @param menus
 * @param route
 */
function hasPermission(menus, route) {
  if (route.authority) {
    if (menus[route.authority] !== undefined) {
      return menus[route.authority]
    } else {
      return false
    }
  } else {
    return true
  }
}

拿到路由表后
动态生成路由

router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
              // setLayout(store.getters.loginName);
              // if (getIsReload() == null && store.getters.loginName === 'admin' && getLayout() != null) {
              //   setIsReload(store.getters.loginName);
              //   location.reload();
              // }
              next({
                ...to,
                replace: true
              }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record