如何写一个vue自定义插件&&前端控制权限访问

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

1. 添加全局方法或者 property。如：vue-custom-element
2. 添加全局资源：指令/过滤器/过渡等。如 vue-touch
3. 通过全局混入来添加一些组件选项。如 vue-router
4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

一个vue插件需要对外暴露一个install方法，这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。
通过全局方法 Vue.use() 使用插件，它需要在你调用 new Vue() 启动应用之前完成。

举个例子：

• 定义一个控制权限访问的auth.js插件：

  function check(item){
    const role = localStorage.getItem('role');
    return item.includes(role)
  }
  function install(Vue,options){
    Vue.directive('auth',{
      inserted:function(el,binding,vNode){
        if(!check(bingding.value)){
          el.parentNode.removeChild(el);
        }
      }
    })
  }
  export default {install}

• 使用auth.js插件

main.js:

  import Auth from './auth.js'
  Vue.use(Auth)

组件中：

  <template>
    <div class="parent">
      <div  v-auth="role" class="child">
      </div>
    </div>
  </template>
  <script>
    export default{
      data(){
        return{
          role:['admin','root']
        }
      }
    }
  </script>  

参考：
vue官网-插件