vue+iviewUI中后台管理系统实现路由权限控制

首先第一步，当用户登陆进来到达首页时触发首页的生周期函数，去拿当前用户的token信息（登陆成功时存到local storage里）掉获取用户菜单权限的接口
这里我的想法是，由于目前菜单有两级，我就把两级的树状菜单通过遍历简化成一级的菜单，然后通过JSON.stringify()函数转化为字符串格式存到localStorage的menuList字段里，这时我就拿到了用户有权限的菜单名称。

this.$axios({
  url: '/获取权限接口',
  method: 'get'
}).then((data) => {
  if (data.code === 200) {
    let menuList = []
    // 由于目前菜单层级只有两级没写递归，多级菜单用递归写
    data.obj.forEach(ele => {
      menuList.push(ele)
      ele.subs.forEach(ele2 => {
        menuList.push(ele2)
      })
    })
    localStorage.menuList = JSON.stringify(menuList)
  }
})

然后我又去梳理了一下项目的路由渲染组件（由于项目是直接拉取的iview admin代码进行二次开发，所以这些菜单渲染组件都是写好的），我发现项目的菜单是通过side-menu父组件以及side-menu-item和collapsed-menu两个子组件通过层层遍历routers路由而渲染出来的。这时我比较好奇为什么是两个子组件，后来发现这两个子组件各有用处。
首先项目里有一个菜单展开和闭合的按钮在页面的左上角，展开是图标加文字全部展示菜单，隐藏是只显示菜单图标。side-menu-item文件是控制展开状态下的菜单，collapsed-menu是控制闭合状态下的菜单。

最后我就开始对比控制菜单的渲染了，代码中 v-for="item in children"是iview admin框架自带的，children代表当前所有的routers，showTitle()函数是为了从菜单层级中拿到对应的菜单名。 v-if="menuList.indexOf(showTitle(item)) >= 0"是我加的，意思是从用户有权限的菜单里寻找和路由里相同的菜单名。这一步就把用户没有权限的菜单筛选出来不展示了。

<template v-for="item in children" v-if="menuList.indexOf(showTitle(item)) >= 0">
      <template v-if="item.children && item.children.length === 1">
        <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
        <menu-item v-else :name="getNameOrHref(item, true)" :key="`menu-${item.children[0].name}`"><common-icon :type="item.children[0].icon || ''"/><span>{{ showTitle(item.children[0]) }}</span></menu-item>
      </template>
      <template v-else>
        <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
        <menu-item v-else :name="getNameOrHref(item)" :key="`menu-${item.name}`"><common-icon :type="item.icon || ''"/><span>{{ showTitle(item) }}</span></menu-item>
      </template>
    </template>

其中side-menu-item文件和collapsed-menu文件里原理和以上代码相同。
以上就是我个人做的一个简单的用户权限菜单控制。
记录一下方便以后查看。