后台的菜单管理配置完了,现在准备把前台的菜单管理和后台的权限联动起来,先看看,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.href
if (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配置