vue--角色管理-白红宇

详细代码：需求：根据用户的不同角色返回不同的前端页面（没有用vuex，分配权限后需退出登录。）
难点：
1.页面访问的限制 - 菜单栏访问：是否全部显示菜单栏，全部则有“无权限页面”；地址栏访问：返回404页面
2.页面中按钮等颗粒化控制
1.路由控制    export const constantRouterMap = [ // 默认路由，无权限控制        {             path: '/',            name: 'index',            component: index        }    ]    export const asyncRouterMap = [        {            path: 'project',            component: () => import('@/pages/myqingju2.0/projectManage'),            meta: {              roles: ['eDJl'] // 后台返回权限指字段绑定            }        }    ]    export default new Router({      mode: 'history',      routes: constantRouterMap,     })2. 筛选符合权限的路由/** * 通过meta.role判断是否与当前用户权限匹配 * @param roles * @param route */function hasPermission(roles, route) {  if (route.meta && route.meta.roles) {    // console.log(route.meta.roles, ' route.meta.roles')    return roles.some(role => route.meta.roles.indexOf(role) >= 0)  } else {    return true  }}/** * 递归过滤异步路由表，返回符合用户角色权限的路由表 * @param asyncRouterMap * @param roles */function filterAsyncRouter(map, roles) {  const accessedRouters = map.filter(route => {    if (hasPermission(roles, route)) {      if (route.children && route.children.length) {        route.children = filterAsyncRouter(route.children, roles)      }      // 子导航的子导航      if (route.meta && route.meta.children && route.meta.children.length) {        route.meta.children = filterAsyncRouter(route.meta.children, roles)      }      return true    }    return false  })  return accessedRouters}3.路由导航钩子    import router from './router'    import { asyncRouterMap, constantRouterMap } from '@/router'    let bool = true    router.beforeEach((to, from, next) => {      let firmCurrentUserInfo = localStorage.firmCurrentUserInfo && JSON.parse(localStorage.firmCurrentUserInfo)      console.log(firmCurrentUserInfo, 'firmCurrentUserInfo')      if ( bool && firmCurrentUserInfo ) {        bool = false // 不加会一直循环        let accessedRouters = []        let map = deepCopy(asyncRouterMap)        let firstroles = firmCurrentUserInfo.baseFirstFunctionList.map(item => item.functionEnum)        let secondroles = firmCurrentUserInfo.baseSecondFunctionList.map(item => item.functionEnum)        // let thirdroles = firmCurrentUserInfo.baseFunctionList.map(item => item.functionEnum)        let ROLES = []        ROLES = ROLES.concat(firstroles, secondroles)        localStorage.setItem('ROLES-qingju', JSON.stringify(ROLES)) // 存储到内存中        accessedRouters = filterAsyncRouter(map, ROLES)        // 动态添加路由        let allRouters = constantRouterMap.concat(accessedRouters)        console.log(allRouters, 'allRouters')        router.addRoutes(allRouters) // !!!        next({ ...to }) // ?      }      next()    })4.页面中按钮或操作 -- 自定义命令/* 颗粒权限 */Vue.directive('has', {  inserted(el, binding) {    let list = JSON.parse(localStorage.firmCurrentUserInfo).baseFunctionList    if (list) {      let hasPermission = list.some((role, index) => {        if (role) {          return binding.value.includes(role.functionEnum)        }      })      if (!hasPermission) { // 为什么父元素为null        el.parentNode && el.parentNode.removeChild(el)        el.style.display = 'none' // 为了隐藏      }    }  }})复制代码