前端控制权限隐藏按钮 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

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

C++中全局变量、函数与静态变量、函数的区别_c++全局函数-程序员宅基地

文章浏览阅读2.2k次。1、全局变量、局部变量、静态全局变量、静态局部变量的区别（1）从作用域看： 1）全局变量具有全局作用域。全局变量只需在一个源文件中定义，就可以作用于所有的源文件。当然，其他不包含全局变量定义的源文件需要用 extern 关键字再次声明这个全局变量。 2）静态局部变量具有局部作用域，它只被初始化一次，自从第一次被初始化直到程序运行结束都一直存在，它和全局变量_c++全局函数

英语口语计算机考试报名时间,2016年大学英语四六级口语考试时间报名时间方式...-程序员宅基地

文章浏览阅读193次。随着6月份的四六级考试成绩的公布，此次考试结果尘埃落定。不过，笔试结束了，不要忘记还有口语考试的存在。8月16日，四六级官网(http://www.cet.edu.cn/)默默的发布了一条消息，内容与16年下半年口语考试报名及考试细节相关，针对里面涉及到的改变和相关细节，所有考生都有必要关注和了解一下。毕竟，下一站就是口语了！》》2016年6月英语四六级成绩查询地址入口Q1：谁可以考？什么时候考？...

Spire.XLS 14.3.3 支持数据透视表分组功能-程序员宅基地

文章浏览阅读727次，点赞17次，收藏18次。Spire.XLS for .NET是一个专业的 Excel .NET API，可用于在任何类型的 .NET（C#、VB.NET、ASP.NET、.NET Core、 .NET 5.0、.NET 6.0、MonoAndroid 和 Xamarin.iOS）应用程序。Spire.XLS for .NET 提供对象模型 Excel API，用于加速 .NET 平台中的 Excel编程 - 从模板创建新的 Excel 文档、编辑现有的 Excel 文档以及转换 Excel 文件。

Eclipse、MyEclipse新建(含Activiti的)web项目没有自动生成web.xml文件(下面告诉你两种添加Web.xml)?!_myeclipseweb项目中创建xml-程序员宅基地

文章浏览阅读3.6k次，点赞9次，收藏12次。一遇到问题,尝试在代码上寻找出处,但........接着我去百度,答案会因为问题的字数多少和重点位置而五花八门,真的弄得我一下午晕头转向的!!! 不过我还是带着一定要找到答案的决心坚持点一个看一个直到我累趴!!!好吧,其中有夸张成分￣ω￣=言归正传,想运行jsp,马虎的我直接在地址栏输"localhost..._myeclipseweb项目中创建xml

ios dat 文件读写_蓝桥杯单片机(CT107D)需要准备的一些文件的写法-程序员宅基地

文章浏览阅读77次。CT107D电路原理图CSDN最新链接TIPS:x所有文件(all files)所有文件(源代码)commoncommon.hcommon#ifndef COMMON_Hmain.cmain#include timer.ctimer#include hc138.chc138#include led.cled#include drivers.cdrivers#include digital_tub..._dat &= ~mask;

mac终端如何用 vim 修改文件和保存退出_mac终端保存-程序员宅基地

文章浏览阅读3.4k次，点赞4次，收藏10次。mac终端如何用 vim 修改文件和保存退出_mac终端保存