页面增加操作权限，不同权限的用户看到页面不同。具体用户权限由服务端持久化，前端页面根据拿到的权限标识进行判断是否展示

实现目标：

• 封装全局的变量及方法
• 通过全局参数直接控制模块是否显示
• 无需引入，在使用vue的页面可直接使用

实现方式

• 新建JS文件，单独封装方法
• 在main.js中引入该JS文件，进行全局注入 （或者直接在main.js中注入方法）
• 在vue页面使用
• 在js中使用

1、在main.js中注入方法

/**
 * 操作权限
 * v-permission可直接控制模块是否显示
 * 全局方法$permission返回是否显示true/false
 */
Vue.directive('permission', {
  bind: function(el, binding) {
    if (!Vue.prototype.$permission(binding.value)) {
      el.style.display = 'none'
    }
  }
})
Vue.prototype.$permission = function(value) {
  let isExist = false
  //  获取拥有的权限
  const role = store.state.permission.buttons
  if (role.length) {
    role.forEach(item => {
      if (value === item.functionCode) {
        if (item.status === '1') {
          isExist = true
        } else {
          isExist = false
        }
      }
    })
  }
  return isExist
}

2、 在vue页面使用

<template>
<AppPopover  v-permission = 'header:router' /> //'header:router'为权限标识，前端拿到的数据中有它存在，即可显示，名字可根据实际需求取
</template>

3、在js中使用

<script>
export default {
  name: 'test',
  data() {
    return {
    activeName: this.$route.query.tabName ? this.$route.query.tabName : this.$permission('dataquery:device') ? 'deviceData' : 'gatewayData',
    };
  },