通过使用路由meta.roles判断当前用户是否具有权限 permission

客官°小女子只卖身不卖艺 2022-10-16 15:28 142阅读 0赞

function hasPermission(roles, route) {
        
      if (route.meta && route.meta.roles) {
        
        return roles.some(role => route.meta.roles.includes(role))
      } else {
        
        return true
      }
    }

递归路由表

export function filterAsyncRoutes(routes, roles) {
        
      const res = []
    
      routes.forEach(route => {
        
        const tmp = {
         ...route }
        if (hasPermission(roles, tmp)) {
        
          if (tmp.children) {
        
            tmp.children = filterAsyncRoutes(tmp.children, roles)
          }
          res.push(tmp)
        }
      })
    
      return res
    }

beautiful -> handleroutes.js

export function filterAsyncRoutes(routes, permissions) {
        
      const finallyRoutes = []
      routes.forEach((route) => {
        
        const item = {
         ...route }
        if (hasPermission(permissions, item)) {
        
          if (item.children) {
        
            item.children = filterAsyncRoutes(item.children, permissions)
          }
          finallyRoutes.push(item)
        }
      })
      return finallyRoutes
    }

验证

const actions = {
        
      generateRoutes({
          commit }, roles) {
        
        return new Promise(resolve => {
        
          let accessedRoutes
          if (roles.includes('admin')) {
        
            accessedRoutes = asyncRoutes || []
          } else {
        
            accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
          }
          commit('SET_ROUTES', accessedRoutes)
          resolve(accessedRoutes)
        })
      }
    }

const mutations = {
        
      SET_ROUTES: (state, routes) => {
        
        state.addRoutes = routes
        state.routes = constantRoutes.concat(routes)
      }
    }

beautful->

const actions = {
        
      async setRoutes({
          commit }, permissions) {
        
        //开源版只过滤动态路由permissions，admin不再默认拥有全部权限
        const finallyAsyncRoutes = await filterAsyncRoutes(
          [...asyncRoutes],
          permissions
        )
        commit('setRoutes', finallyAsyncRoutes)
        return finallyAsyncRoutes
      },
      async setAllRoutes({
          commit }) {
        
        let {
         data } = await getRouterList()
        data.push({
         path: '*', redirect: '/404', hidden: true })
        let accessRoutes = convertRouter(data)
        commit('setAllRoutes', accessRoutes)
        return accessRoutes
      },
      setPartialRoutes({
          commit }, accessRoutes) {
        
        commit('setPartialRoutes', accessRoutes)
        return accessRoutes
      },
    }

const mutations = {
        
      setRoutes(state, routes) {
        
        state.routes = constantRoutes.concat(routes)
      },
      setAllRoutes(state, routes) {
        
        state.routes = constantRoutes.concat(routes)
      },
      setPartialRoutes(state, routes) {
        
        state.partialRoutes = constantRoutes.concat(routes)
      },
    }