前端控制权限隐藏按钮 vue自定义指令v-has

1.通过请求获取权限，放入localStorage：
（这里是多个权限，保存为字符串，用逗号隔开）

window.localStorage.setItem("permissionPage", "editPage,detailPage");
window.localStorage.setItem("permissionButton", "canEdit,canDelete");

2.在main.ts中引入：

import hasPermission from '@/common/utils/hasPermission'
Vue.use(hasPermission)

3.新建一个hasPermission.ts文件：
在目录：src/common/utils

import Vue from 'vue';
const _ = require("lodash");

const hasPermission = {
    install(Vue: any, options: any) {
        //自定义指令v-has：
        Vue.directive('has', {
            //inserted：被绑定元素插入父节点时调用
            inserted: function (el: any, binding: any) {
                if (!Vue.prototype.$_has(binding.value)) {
                    el.parentNode.removeChild(el);
                }
            },
        });
        //权限检查方法
        Vue.prototype.$_has = function (value: any) {
            let isExist = false;
            //将拥有的权限字符串转拆分为数组：
            
            let pageArr =_.split(localStorage.getItem("permissionPage"), ',');
            let buttonArr = _.split(localStorage.getItem("permissionButton"), ',');

            //判断是否页面有权限            //判断是否按钮有权限
            if (pageArr.includes(value) || buttonArr.includes(value)) {
                isExist = true;
            }
            
            return isExist;

        };
    }
};
export default hasPermission;

用localStorage.getItem(“permissionPage”)，localStorage.getItem(“permissionButton”)分别与指令传过来的value相对比。
相同证明有权限，显示；不相同就没权限，不显示。

4.使用方法：

<van-col span="12" v-has="'canEdit'">编辑</van-col>

易踩坑：使用自定义指令钩子函数bind，无法删除节点：el.parentNode.removeChild，只调用一次，指令第一次绑定到元素时调用。节点还没生成出来。应使用inserted。

本文地址：https://blog.csdn.net/weixin_44914782/article/details/109239798