[风铃开发系列]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.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配置