Newer
Older
ProductionSysFront / src / store / modules / permission.js
StephanieGitHub on 9 Mar 2020 3 KB create base
/**
 * 权限管理
 */
import { asyncRouterMap, constantRouterMap } from '@/router'
import { getMenus } from '@/api/login'

/**
 * 通过meta.permission判断是否与当前用户权限匹配, 该方法暂时废弃,old
 * @param roles
 * @param route
 */
// function hasPermission(menus, route) {
//   if (route.meta && route.meta.permission) {
//     return menus.some(menu => { // 遍历menus,查找route.meta.permission是否有匹配的menu
//       route.meta.permission.includes(menu.url)
//     })
//   } else {
//     return true
//   }
// }
/**
 * 判断路由是否在菜单列表里,在则返回菜单对象,否则返回undefined
 * @param menus 菜单列表(用户拥有权限的菜单列表)
 * @param route 路由
 * @returns menu_res 匹配成功的菜单对象
 */
function getMenu(menus, route) {
  let menu_res
  if (route.meta && route.meta.permission) {
    menu_res = menus.find(menu => { // 遍历menus,查找route.meta.permission是否有匹配的menu
      return route.meta.permission.includes(menu.url)
    })
  }
  return menu_res
}

/**
 * 递归过滤异步路由表,返回符合用户权限的路由表
 * @param routes asyncRouterMap 动态路由表
 * @param menus 用户可看到的菜单项
 */
function filterAsyncRouter(routes, menus) {
  const res = []
  // 遍历每一个路由,判断是否有权限
  routes.forEach(route => {
    const tmp = { ...route }
    // if (hasPermission(menus, tmp)) { // 如果有权限,添加该路由,old
    //   if (tmp.children) {
    //     tmp.children = filterAsyncRouter(tmp.children, menus)
    //   }
    //   res.push(tmp)
    // }
    const menu = getMenu(menus, tmp)
    if (menu) { // 如果有权限,添加该路由,并根据url的icon更新图标
      tmp.meta.icon = menu.icon // 给route更新icon
      tmp.meta.title = menu.name // 给route更新名称
      if (tmp.children) {
        tmp.children = filterAsyncRouter(tmp.children, menus)
      }
      res.push(tmp)
    } else {
      if (!tmp.meta) {
        res.push(tmp)
      }
    }
  })
  return res
}

const permission = {
  state: {
    routers: constantRouterMap,
    addRouters: [],
    menus: [], // 菜单
    btns: [] // 按钮
  },
  mutations: {
    SET_ROUTERS: (state, routers) => {
      state.addRouters = routers
      state.routers = constantRouterMap.concat(routers)
    },
    SET_MENUS: (state, menus) => {
      state.menus = Array.from(menus)
    },
    SET_BTNS: (state, btns) => {
      state.btns = Array.from(btns)
    }
  },
  actions: {
    // 获取用户权限
    GetMenus({ commit, state }) {
      console.log('in store.permission.js:GetMenus:')
      return new Promise((resolve, reject) => {
        getMenus(state.token).then(response => { // 处理返回值
          const data = response.data
          const menus = [] // 仅菜单
          const btns = [] // 非菜单
          if (data.menus && data.menus.length > 0) {
            commit('SET_MENUS', data.menus)
            for (const menu of data.menus) { // 遍历菜单,获取所有的权限项
              if (menu.ismenu === '1') { // 将是菜单的放入menus
                const menu_tmp = {}
                menu_tmp.url = menu.url
                menu_tmp.icon = menu.icon
                menu_tmp.name = menu.name
                menus.push(menu_tmp)
              }
              const btn_tmp = {}
              btn_tmp.url = menu.url
              btn_tmp.name = menu.name
              btn_tmp.icon = menu.icon
              btns.push(btn_tmp)
              // console.log(menu.url)
            }
          }
          // 过滤路由表
          const accessedRouters = filterAsyncRouter(asyncRouterMap, menus)
          commit('SET_BTNS', btns)
          commit('SET_ROUTERS', accessedRouters)
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
}

export default permission