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
关于博主：后端搬砖，业余前端。评论和私信会在第一时间回复。
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！