自定义指令控制权限

最新推荐文章于 2024-07-22 15:13:59 发布

执、

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量463

点赞数 13

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_62965575/article/details/136715038

版权

文章介绍了如何在Vue应用中创建一个基于PiniaStore的自定义指令，用于检测元素是否具有特定的角色或权限，如果不符合则从DOM中移除。指令适用于菜单和组件中的权限控制。

摘要由CSDN通过智能技术生成

1.新建directives auth.ts

2.完整的auth.ts

import { wmsStore } from "@/store/pinia";

//判断是否有某个角色的函数
function hasRoles(role: any) {
    const pinaRoles = wmsStore().roles;
    if (typeof role === 'string') {
        return pinaRoles.includes(role)
    } else if (Array.isArray(role)) {
        return pinaRoles.some(item => role.includes(item))
    } else {
        return false
    }
}
//判断是否有某个权限的角色
function hasPermissions(permissions: any) {
    const pinaPermissions = wmsStore().permissions;
    if (typeof permissions === 'string') {
        return pinaPermissions.includes(permissions)
    } else if (Array.isArray(permissions)) {
        return pinaPermissions.some(item => permissions.includes(item))
    } else {
        return false
    }
}

//创建自定义指令
export default {
  mounted(el: HTMLElement, binding: any) {
    const type = binding.arg;
    if (type === "role") {
      if (!hasRoles(binding.value)) {
        el.remove();
      }
    }else{
        if (!hasPermissions(binding.value)) {
            el.remove();
          } 
    }
  },
};

3.在main.ts中引入使用