当前位置: 首页 > 工具软件 > v-page > 使用案例 >

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

吕淮晨
2023-12-01

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。

 类似资料: