antd design pro vue 路由詳解

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.