自定义指令简单实现vue2.x后台管理系统权限控制

touch permission.ts

import Vue from "vue";
Vue.directive("permission", {
  inserted: (el, binding /** , vnode */) => {
    const permission =
      localStorage.premission && localStorage.premission.length > 0
        ? JSON.parse(localStorage.premission)
        : [];
        // 判断如果不存在这个code 那就删除父节点
    if (!permission.includes(binding.value)) {
      console.log("binding.value",binding.value)
      if (el.parentNode !== null) {
        el.parentNode.removeChild(el);
      }
    }
  }
});

• 权限控制逻辑整体就是：先通过登录获取用户信息(后端支持）及该用户的权限code，以数组形式存储在localStorage中，在需要权限控制的菜单或者按钮添加相应的v-permission=""即可简单实现权限控制，防止用户篡改localStorage数据，在main.ts中添加window.addEventListener方法，监听storage。

window.addEventListener("storage",function(event){

})

• 简单的实现在用户修改缓存数据时做相应操作，如提示或者跳转登录页。