vue封装按钮级全局指令

思路：
1、将后端返回的权限列表存储到localStorage中
2、在通过自定义指令接收传过来的值与后端返回值作比较

// utils/has.js
import Vue from 'vue';

const has = Vue.directive('has', {
  // 当绑定的元素被插到DOM时
  inserted: (el, binding) => {
    /* eslint-disable */ 
    const value = binding.value

    // 将后端返回的权限列表从localStorage中取出（为一个数组）
    const projectId = window.localStorage.getItem("projectId");
    const { authCodes } = JSON.parse(window.localStorage.getItem("userInfor")) || {};
    const authCode = projectId && authCodes[projectId];

    // 判断权限列表是否包含传过来的值
    if (!authCode.includes(value)) {
      // 为防止用户F12查看元素修改display属性，此地方用删除元素的做法
      el.remove()
    }
  }
})
export default has

// main.js
import Has from './utils/has'
Vue.use(Has) // 挂载到vue中

// 页面中使用
v-has='123'

标签：vue,const,projectId,value,Vue,localStorage,按钮,封装
来源： https://www.cnblogs.com/demoTimes/p/15588790.html