[风铃开发系列]IView动态菜单配置

后台的菜单管理配置完了,现在准备把前台的菜单管理和后台的权限联动起来,先看看,IView admin是如何显示的
所以的菜单在router/routers.js下面配置,配置好我们路径,因为前端的路由基本上把所有的配置好了,我们只要看用户具有哪些权限就可以了,反过来看,菜单管理感觉是个多余的项目了,不如叫个权限管理,或者比较流行的资源管理,下面我们还是进入正题看下IView admin是如何实现的

<Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}"><side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList"><!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 --><div class="logo-con"><img v-show="!collapsed" :src="maxLogo" key="max-logo" /><img v-show="collapsed" :src="minLogo" key="min-logo" /></div></side-menu></Sider>

菜单是由这个组件完成的,我们要做的就是:menu-list=“menuList” 这个菜单获得就可以了

getters: {menuList: (state, getters, rootState) => getMenuByRouter(routers, rootState.user.access),errorCount: state => state.errorList.length},

在main.vue获取菜单路由的访问权限,还是从routers里面去读取的,但是我们可以通过rootState.user.access这个来配置权限,是由如下代码完成的

/**
* @param {Array} list 通过路由列表得到菜单列表
* @returns {Array}
*/
export const getMenuByRouter = (list, access) => {let res = []
forEach(list, item => {if (!item.meta || (item.meta && !item.meta.hideInMenu)) {let obj = {icon: (item.meta && item.meta.icon) || '',name: item.name,meta: item.meta}if ((hasChild(item) || (item.meta && item.meta.showAlways)) && showThisMenuEle(item, access)) {obj.children = getMenuByRouter(item.children, access)}if (item.meta && item.meta.href) obj.href = item.meta.hrefif (showThisMenuEle(item, access)) res.push(obj)}
})
return res
}const showThisMenuEle = (item, access) => {if (item.meta && item.meta.access && item.meta.access.length) {if (hasOneOf(item.meta.access, access)) {return true} else {return false}
} else {return true
}
}

需要我们routers里面的菜单必须有meta元素,和meta.access元素,如果不配置默认就是显示的,这个也是为啥我们基础代码都是全部显示的,现在加上之后,就不会再显示,同时在登录的时候返回用户外加所有的权限,就可以动态控制菜单显示了
当然这只是前端的权限的配置,真正有用的还是后端的shiro配置

[风铃开发系列]IView动态菜单配置相关推荐

Rockchip开发系列 - 3.2.引脚配置默认上拉下拉
By: fulinux E-mail: fulinux@sina.com Blog: https://blog.csdn.net/fulinus 喜欢的盆友欢迎点赞和订阅! 你的喜欢就是我写作的动力! ...
微信公众号开发账号申请以及菜单配置。
一.微信公众平台接口测试帐号申请 1. 账号申请地址:账号申请地址二.微信公众平台接口测试帐号配置 1. 测试号基本信息appid 2. 配置JS接口安全域名名(页面域名) 注意:不要加上http或 ...
Dapr微服务应用开发系列1：环境配置
题记:上篇Dapr系列文章简要介绍了Dapr,这篇来谈一下开发和运行环境配置本机开发环境配置安装Docker 为了方便进行Dapr开发,最好(其实不一定必须)首先在本机(开发机器)上安装Docke ...
微信开发模式下自定义菜单配置
微信打开开发者模式后,以前通过微信后台配置的菜单就失效了,需要通过我们自己服务器后台配置(需要开发),还有一种比较简单的方法,就是通过微信提供的"微信公众平台接口测试工具"进行配置 ...
微信开发系列之自定义菜单实现
编辑模式和开发模式是有冲突的.所以我们启用微信公众号的开发模式之后,那些菜单是看不到的哦.不过现在个人订阅号是不可以使用高级开发者模式的,如自定义菜单,不过我们还是可以通过测试号来测试一下,然后移代码 ...
Dapr微服务应用开发系列5：发布订阅构建块
题记:这篇介绍发布订阅构建块,这是对事件驱动架构设计的一种实现落地. 注:对于"Building Blocks"这个词组的翻译,我之前使用了"构件块",现在和官 ...
Dapr微服务应用开发系列4：状态管理构件块
Dapr微服务应用开发系列0:概述 Dapr微服务应用开发系列1:环境配置 Dapr微服务应用开发系列2:Hello World与SDK初接触 Dapr微服务应用开发系列3:服务调用构件块题记:这篇 ...
Rockchip开发系列 - 总目录
By: fulinux E-mail: fulinux@sina.com Blog: https://blog.csdn.net/fulinus 喜欢的盆友欢迎点赞和订阅! 你的喜欢就是我写作的动力! ...
Hololens开发系列目录
Hololens基础 Hololens开发系列目录 01混合现实概述 Hololens开发系列目录 02环境配置 Hololens开发系列目录 03MRTK导入和配置 Hololens开发系列目录 0 ...

[风铃开发系列]IView动态菜单配置

[风铃开发系列]IView动态菜单配置相关推荐

最新文章

热门文章