D2Admin 登錄用戶重新初始話右側菜單

背景

　　最近用到D2Admin開發項目，用戶登錄菜單要根據用戶角色權限獲取，但是又不想用官網的方案(vue基於d2-admin的RBAC權限管理解決方案)，所以自己加了個只修改menuAside的方案。方案如下：

 

step 1. 在demo/src/api/modules/sys.user.api.js中

　　export default 前新增：

import util from '@/libs/util'
import router from '@/router'
const toLogin = () => {
  util.cookies.remove('token')
  util.cookies.remove('uuid')
  // 清空 vuex 用戶信息
 // this.$store.dispatch('d2admin/user/set', {}, { root: true })
  router.push({ name: 'login' })
}

　　export default 內新增：　　

,
  getMenuList () {
    const token = util.cookies.get('token')
    if (token === undefined) {
      toLogin()
    }
    return request({
      url: '/demo/system/getMenuList',
      headers: {
        Authorization: token,
     },
      method: 'post',
      data: {}
    })

step 2. 在demo/src/store/modules/d2admin/modules/account.js中

　　export default 前新增：

import store from '@/store/index'
import { menuHeader, menuAside } from '@/menu'

// 右側菜單數據處理
const clearTreeChild = async (dataMap) => {
  dataMap.map((item,index)=>{
    // item.path 為空導致菜單全部收縮問題
    if(item.path === null || item.path === ''){
      item.path = 'd2-menu-empty-demo-' + index
    }
    // 包含children的菜單含下拉圖標
    if(item.children == null || item.children.length == 0){
      delete item.children
    } else {
      clearTreeChild (item.children)
    }
  })
}

　　export default 內方法‘async load ({ dispatch })’新增：

const res = await api.getMenuList()
//res.data內是menuAside格式的菜單數據
clearTreeChild (res.data)
//用戶權限菜單合並固定菜單
let allMenuAside = [...menuAside, ...res.data]
store.commit('d2admin/menu/asideSet', allMenuAside)

注：項目右側固定菜單為 demo/src/menu/index.js中menuAside，可根據實際情況自行刪改

 

相關資源：

D2Admin的API文檔地址： https://d2.pub/zh/doc/d2-admin/

 vue基於d2-admin的RBAC權限管理解決方案：https://github.com/wjkang/d2-admin-pm

 

 

作　　者：文靜~
出　　處：https://www.cnblogs.com/tong2018/p/d2admin-menuAside.html
關於博主：后端搬磚，業余前端。評論和私信會在第一時間回復。
聲援博主：如果您覺得文章對您有幫助，可以點擊文章右下角 【推薦】一下。您的鼓勵是博主的最大動力！