欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-23 11:32:52
1.通过请求获取权限,放入localStorage:(这里是多个权限,保存为字符串,用逗号隔开)window.localStorage.setItem("permissionPage", "editPage,detailPage");window.localStorage.setItem("permissionButton", "canEdit,canDelete");2.在main.ts中引入:import hasPermission from '@/common/utils/hasPermi...

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