vue后台管理权限导航控制

1、html

<el-menu
  :default-active="$route.path"
  class="el-menu-vertical-demo"
  background-color="#FFF"
  :unique-opened="true"
  color="#303133"
  active-text-color="#c00000">
  // 这是封装的小导航栏
  <appAsideItem
    v-for='item in menuArr'
    :menu="item"
    :key='item.id'
    :funcs="showFuncObj"/>
</el-menu>

## 这是appAsideItem递归的组件导航
<el-submenu v-if="menu.children && funcs[menu.func]" :index = "menu.id">
  <template slot="title">
    <i :class="menu.icon"/>
    <span slot="title" class="title-span">{{ menu.text }}</span>
  </template>
  <template v-if="menu">
    <appAsideItem v-for="item in menu.children" :menu="item" :key="item.id" :funcs="showFuncObj"/>
  </template>
</el-submenu>
<el-menu-item v-else-if="!menu.children && funcs[menu.func]" :index = "menu.path" @click="handleJump(menu)">
  <i :class="menu.icon"/>
  <span slot="title">{{ menu.text }}</span>
</el-menu-item>

2、权限的控制

<script>
export default {
  name: 'drag1',
  data () {
    return {
      // 后端返回的具有权限的数据（登录之后的数据，这里应该存在vuex里面）
      getByApiFunc: {
        300200: true,
        300201: true,
        300202: true,
        300203: true,
        300204: true
      },
      // 前端自己定义的权限功能号（这里应该写在一个公共的utils里面定义）
      getByPerFunc: {
        first: '300200',
        second: '300201',
        third: '300202',
        fourth: '300203',
        fifth: '300204',
        six: '300205',
        seven: '300206',
        eight: '300207',
        nine: '300208',
        ten: '300209'
      },
      // 路由展示的数据格式 showFuncObj: { first: true, ten: false }这种数据
      showFuncObj: {}
    }
  },
  created () {
    this.checkApiKey()
  },
  // demo只是将所有的方法抽在一起，实际的开发还是要分开
  methods: {
  // 这里的作用主要是将自己定义的功能号处理方便menu导航栏展示（这里应该在el-menu的页面定义这个放方法）
    checkApiKey () {
      const funcArr = {}
      Object.keys(this.getByPerFunc).forEach(item => {
        funcArr[item] = this.checkFunc(item)
      })
      this.showFuncObj = funcArr
    },
  // 这里的是返回自定义功能号是否具有权限的bool值，方便展示
    checkFunc (item) {
      const funcVal = this.getByPerFunc[item]
      if (!funcVal) return true
      return this.getByApiFunc[funcVal] === true
    }
  }
}
</script>