xlb-main-login/src/store/modules/permission.js

``` yarn install ```

import { initRouterMap } from '@/router/router.config'
import { permissionAPI } from '@/api/permission'
import { apiDataToMenu, apiDataToNavgations } from '@/utils/transform'
import actions from '@/actions'

// 根据当前路由的name判断是否包含此路由权限，路由name格式必须为nav-module-page格式
function hasPermission(permissions, route) {
  const nameList = route.name?.split('-')
  if (nameList && nameList.length) {
    const [navName, moduleName, pageName] = [...nameList]
    if (pageName) {
      return !!window.moduleItem.children.find((item) => item.name === pageName)
    }
    if (moduleName) {
      window.moduleItem = permissions.children.find((item) => item.name === moduleName)
      return !!window.moduleItem
    }
    if (navName) {
      return permissions.name === navName
    }
    return false
  }
  return false
}

// 递归遍历所有节点，filter方法排除无权限路由节点
function filterAsyncRouter(routerMap, rootPath, permissions) {
  const accessedRouters = routerMap.filter((route) => {
    if (route.path.startsWith(rootPath) && hasPermission(permissions, route)) {
      if (route.children && route.children.length) {
        route.children = filterAsyncRouter(route.children, rootPath, permissions)
      }
      return true
    }
    return false
  })
  return accessedRouters
}

const permission = {
  state: {
    routers: [],
    navigations: null,
    permissions: [],
    userPermission: null,
    userPermissionTemp: null,
  },
  mutations: {
    SET_NAVGATIONS: (state, data) => {
      state.navigations = data
    },
    SET_ROUTES: (state, routers) => {
      state.routers = state.routers.concat(routers)
    },
    SET_PERMISSIONS: (state, data) => {
      state.permissions = [data]
    },
    SET_USER_PERMISSIONS: (state, data) => {
      state.userPermission = data
    },
    SET_USER_PERMISSIONS_TEMP: (state, data) => {
      state.userPermissionTemp = data
    },
  },
  actions: {
    setUserPermission({ commit, state }, list) {
      commit('SET_USER_PERMISSIONS', list)
    },
    setUserPermissionTemp({ commit, state }, list) {
      commit('SET_USER_PERMISSIONS_TEMP', list)
    },
    // 获取当前用户所有权限  加星
    getPermission({ commit, state }) {
      return new Promise((resolve, reject) => {
        //退出或在登录页需清空
        if (state.userPermissionTemp) {
          commit('SET_USER_PERMISSIONS', state.userPermissionTemp)
          resolve(state.userPermissionTemp)
        } else {
          permissionAPI
            .getCurrentPermission()
            .then((result) => {
              if (result.success) {
                actions.setGlobalState({ userData: result.value })
                commit('SET_USER_PERMISSIONS', result.value)
                commit('SET_USER_PERMISSIONS_TEMP', result.value)
                resolve(result.value)
              } else {
                reject(new Error('获取用户权限失败'))
              }
            })
            .catch((error) => {
              reject(error)
            })
        }
      })
    },
    // 获取当前用户所有权限
    getCurrentPermission({ commit, state }) {
      return new Promise((resolve, reject) => {
        if (state.userPermission) {
          resolve(state.navigations)
        } else {
          permissionAPI
            .getCurrentPermission()
            .then((result) => {
              console.log(result)
              if (result.success) {
                commit('SET_USER_PERMISSIONS', result.value)
                resolve(result.value)
              } else {
                reject(new Error('获取用户权限失败'))
              }
            })
            .catch((error) => {
              reject(error)
            })
        }
      })
    },
    // 获取初始化导航栏菜单权限
    initNavigations({ dispatch, commit, state }) {
      return new Promise((resolve) => {
        if (state.navigations) {
          resolve(state.navigations)
        } else {
          // 先从vuex中获取当前用户权限
          if (state.userPermission) {
            resolve(apiDataToNavgations(state.userPermission))
          } else {
            // vuex不存在后调用接口获取
            dispatch('getCurrentPermission').then((result) => {
              if (result) {
                const navigations = apiDataToNavgations(state.userPermission)
                commit('SET_USER_PERMISSIONS', state.userPermission)
                commit('SET_NAVGATIONS', navigations)
                resolve(navigations)
              } else {
                resolve(undefined)
              }
            })
          }
        }
      })
    },
    // 获取左侧菜单路由权限
    getMenuPermission({ dispatch, commit, state }, navName) {
      return new Promise((resolve) => {
        // 先从vuex中获取当前用户权限
        if (state.userPermission) {
          resolve(apiDataToMenu(state.userPermission, navName))
        } else {
          // vuex不存在后调用接口获取
          dispatch('getCurrentPermission').then((result) => {
            if (result) {
              commit('SET_USER_PERMISSIONS', state.userPermission)
              resolve(apiDataToNavgations(state.userPermission, navName))
            }
          })
        }
      })
    },
    // 动态生成路由
    generateRoutes({ commit }, { rootPath, menuPermission }) {
      return new Promise((resolve) => {
        const accessedRouters = filterAsyncRouter(rootPath, menuPermission)
        if (accessedRouters) {
          commit('SET_ROUTES', accessedRouters)
          commit('SET_PERMISSIONS', menuPermission)
        }
        resolve(accessedRouters)
      })
    },
    // 初始化静态路由
    initRouters({ commit }) {
      commit('SET_ROUTES', initRouterMap)
    },
  },
}

export default permission