Vue3+TS封装自定义权限按钮指令

最新推荐文章于 2024-06-16 22:02:56 发布

Faith_ZL

最新推荐文章于 2024-06-16 22:02:56 发布

阅读量520

点赞数

文章标签： vue.js 前端 typescript

本文链接：https://blog.csdn.net/qq_43575827/article/details/130419034

版权

文章介绍了如何在Vue3项目中结合TypeScript封装一个自定义指令v-permission，用于权限控制。该指令在元素挂载时检查用户权限，如果用户不具备相应权限，则隐藏对应的按钮。实现过程中涉及到指令的声明、生命周期方法以及从sessionStorage中获取权限数据的处理。

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

Vue3 +TS 封装自定义指令

在main.ts目录同级新建direct.ts文件

import { Directive } from 'vue';
export const permission: Directive = {
  // mounted是指令的一个生命周期
  mounted(el, binding) {
    // value 获取用户使用自定义指令绑定的内容
    const { value } = binding;
    // 获取用户所有的权限按钮 ["order/search","feedback/search"]
    const permissionBtn: any = JSON.parse(sessionStorage.getItem('permission')).data;
    // 判断用户使用自定义指令，是否使用正确了
    if (value && value instanceof Array && value.length > 0) {
      const permissionFunc = value;
      if (!permissionBtn) return false;
      //判断传递进来的按钮权限，用户是否拥有
      //Array.some(), 数组中有一个结果是true返回true，剩下的元素不会再检测
      console.log(permissionBtn, 'permissionBtn');
      const hasPermission = permissionBtn.some((role: any) => {
        return permissionFunc.includes(role);
      });
      // 当用户没有这个按钮权限时，设置隐藏这个按钮
      if (!hasPermission) {
        el.style.display = 'none';
      }
    } else {
      throw new Error("need roles! Like v-permission=\"['admin','editor']\"");
    }
  }
};

权限串类似下图
在这里插入图片描述

在main.ts引入

import { createApp,Directive } from 'vue';
import App from './App.vue';

const app = createApp(App);
Object.keys(directives).forEach(key => {  //Object.keys() 返回一个数组，值是所有可遍历属性的key名
  app.directive(key, (directives as { [key: string ]: Directive })[key])  //key是自定义指令名字；后面应该是自定义指令的值，值类型是string
})
app.mount('#app');