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'
上一篇:前端本地缓存:封装localStorage支持设置过期时间、命名空间


下一篇:关于localStorage.getItem取数据的问题