antd design pro vue 路由详解

2021-05-21 16:33:17 阅读：844 来源： 互联网

标签：src vue const permission pro role result commit design

antd design pro vue 的路由有两种方式一种是前端定义好路由routes，由后端返回roles进行过滤；另一种是后端返回 routes 列表生成menu。

一、先看第一种方式前端定义好路由routes，由后端返回roles进行过滤

1、在src/permission.js 路由守卫首先在派发一个GetInfo的action 调取getinfo()方法调后台的用户接口返回用户信息和roles用户权限

　在src/store/modules/user.js中

// 获取用户信息
    GetInfo ({ commit }) {
      return new Promise((resolve, reject) => {
        getInfo().then(response => {
          const result = response.result

          if (result.role && result.role.permissions.length > 0) {
            const role = result.role
            role.permissions = result.role.permissions
            role.permissions.map(per => {
              if (per.actionEntitySet != null && per.actionEntitySet.length > 0) {
                const action = per.actionEntitySet.map(action => { return action.action })
                per.actionList = action
              }
            })
            role.permissionList = role.permissions.map(permission => { return permission.permissionId })
            commit('SET_ROLES', result.role)
            commit('SET_INFO', result)
          } else {
            reject(new Error('getInfo: roles must be a non-null array !'))
          }

          // commit('SET_ROLES', result.role)
          // commit('SET_INFO', result)
          commit('SET_NAME', { name: result.name, welcome: welcome() })
          commit('SET_AVATAR', result.avatar)

          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },

　通过 role.permissionList = role.permissions.map(permission => { return permission.permissionId })

把返回的权限role的permisssionList字段中 并将roles存储到vuex中

然后继续看在src/permission.js 派发GenerateRoutes action 将 getinfo（）的返回 作为 commit参数 传递给 GenerateRoutes
这里注意 在antd pro vue 中 是分成两种路由方式的 我们用第一种前端写死路由方式  所以 在src/store/index.js 注释掉如图

然后重点看这个src/strore/modules/permission.js

依赖这个方法参数为 asyncRouterMap 为 src/config/router.config.js 前端写死的路由表

通过过滤 asyncRouterMap 那route对象里meta的permission字段判断是否包含permissionList数组中的任何一项

for (let i = 0, len = permission.length; i < len; i++) {
      flag = route.meta.permission.includes(permission[i])
      if (flag) {
        return true
      }
    }

最后将静态路由合并到一起写到vuex中

// 根据roles权限生成可访问的路由表
// 动态添加可访问路由表
router.addRoutes(store.getters.addRouters)

二、第二种方式 服务端返回routes列表 前端组装成menu树
 
1、首先 找到src/store/index.js

2、还是找到src/permission.js

派发的GenerateRoutes commit 传token

actions: {
    GenerateRoutes ({ commit }, data) {
      return new Promise(resolve => {
        const { token } = data
        generatorDynamicRouter(token).then(routers => {
          commit('SET_ROUTERS', routers)
          resolve()
        })
      })
    }
  }

在src/router/generator-routers

/**
 * 动态生成菜单
 * @param token
 * @returns {Promise<Router>}
 */
export const generatorDynamicRouter = (token) => {
  return new Promise((resolve, reject) => {
    loginService.getCurrentUserNav(token).then(res => {
      const { result } = res
      const menuNav = []
      const childrenNav = []
      //      后端数据, 根级树数组,  根级 PID
      listToTree(result, childrenNav, 0)
      console.log('childrenNav3333',childrenNav)
      rootRouter.children = childrenNav
      menuNav.push(rootRouter)
      console.log('menuNav', menuNav)
      const routers = generator(menuNav)
      routers.push(notFoundRouter)
      console.log('routers', routers)
      resolve(routers)
    }).catch(err => {
      reject(err)
    })
  })
}

服务端返回

通过

/**
 * 数组转树形结构
 * @param list 源数组
 * @param tree 树
 * @param parentId 父ID
 */
const listToTree = (list, tree, parentId) => {
  list.forEach(item => {
    // 判断是否为父级菜单
    if (item.parentId === parentId) {
      const child = {
        ...item,
        key: item.key || item.name,
        children: []
      }
      // 迭代 list， 找到当前菜单相符合的所有子菜单
      listToTree(list, child.children, item.id)
      // 删掉不存在 children 值的属性
      if (child.children.length <= 0) {
        delete child.children
      }
      // 加入到树中
      tree.push(child)
    }
  })
}

动态生成menu

over.

标签：src,vue,const,permission,pro,role,result,commit,design
来源： https://www.cnblogs.com/junwu/p/14794358.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

antd design pro vue 路由详解