vue后台项目按钮权限的实现

做后台项目的时候 几乎都会有权限问题 一方面是菜单栏的权限 另一方面是按钮权限 菜单权限一般往往是通过后台返的token 得到动态的菜单栏 按钮权限也跟token有关 但是要结合自定义指令来实现 

1：在utils文件夹下建一个btnsPermission.js

import Vue from 'vue'
import Router from 'vue-router'

const has = Vue.directive('has',{
  inserted:function (el,binding) {
    let className = binding.value.class //这个地方要注意了，看下面页面上的代码，对应取得相应的值
    if(!Vue.prototype.$_has(className)){
      el.parentNode.removeChild(el)
    }
  }
})
// 权限检查方法
Vue.prototype.$_has = function (val) {
  let isShow = false
  let btnPowerArr = sessionStorage.getItem('btns')
  if(btnPowerArr==undefined || btnPowerArr==null){
    return false
  }
  if(btnPowerArr.indexOf(val) > -1){
    isShow = true
  }
  return isShow
}
export {has}

2：在main.js中引入

import has from './utils/btnsPermission';

 3：页面直接使用  写的一个小demo

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      >
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      >
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      >
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      >
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      >
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" v-has="{class:'查看'}" type="text" size="small">查看</el-button>
        <el-button type="text" size="small"  v-has="{class:'编辑'}">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    mounted(){
      const btns = []
			if (this.$route.meta.btns && this.$route.meta.btns.length > 0) {
				this.$route.meta.btns.forEach(item => {
					btns.push(item)
				})
			}
      sessionStorage.setItem('btns', JSON.stringify(btns))
    },
    methods: {
      handleClick(row) {
      }
    },

    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }]
      }
    }
  }
</script>

看看路由里面数据 一般情况下 都是动态生成的  我这边直接给写的

这样就实现了~